DESAIN WEB (CSS GRID)
CSS GRID
1. Link File
<nav>
<!-- <strong>This is the navigation</strong> -->
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="flexbox.html">Flexbox</a>
<a href="css-grid.html">CSS Grid</a>
</nav>
2. Latihan 1
.container--1 {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* CSS GRID */
display: grid;
grid-template-columns: 200px 200px 100px 100px;
grid-template-rows: 300px 200px;
}
3. Latihan 2
.container--1 {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* CSS GRID */
display: grid;
grid-template-columns: 200px 200px 100px 100px;
grid-template-rows: 300px 200px;
/* gap: 30px; */
column-gap: 20px;
row-gap: 40px;
}
4. Latihan 3 (Penggunaan FR)
.container--1 {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* CSS GRID */
display: grid;
grid-template-columns: 200px 200px 1fr 100px;
grid-template-rows: 300px 200px;
/* gap: 30px; */
column-gap: 20px;
row-gap: 40px;
}
5. Latihan 4
.container--1 {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* CSS GRID */
display: grid;
/* grid-template-columns: 200px 200px 1fr 100px; */
/* grid-template-rows: 300px 200px; */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
/* gap: 30px; */
column-gap: 20px;
row-gap: 40px;
}
6. Latihan 5
.el--8 {
grid-column: 2/ 3 ;
grid-row: 1 / 2;
}
.el--2 {
grid-column: 1 / 1;
grid-row: 2;
}
7. Latihan 6 (Disable Container-1 with display: none)
.container--2 {
/* STARTER */
font-family: sans-serif;
background-color: black;
font-size: 40px;
margin: 100px;
width: 1000px;
height: 600px;
/* CSS GRID */
}
8. Latihan 7
.container--2 {
/* STARTER */
font-family: sans-serif;
background-color: black;
font-size: 40px;
margin: 100px;
width: 1000px;
height: 600px;
/* CSS GRID */
display: grid;
grid-template-columns: 125px 200px 125px;
grid-template-rows: 250px 100px;
}
9. Latihan 8
.container--2 {
/* STARTER */
font-family: sans-serif;
background-color: black;
font-size: 40px;
margin: 100px;
width: 1000px;
height: 600px;
/* CSS GRID */
display: grid;
grid-template-columns: 125px 200px 125px;
grid-template-rows: 250px 100px;
justify-content: center;
align-content: center;
}
10. Latihan 9
.container--2 {
/* STARTER */
font-family: sans-serif;
background-color: black;
font-size: 40px;
margin: 100px;
width: 1000px;
height: 600px;
/* CSS GRID */
display: grid;
grid-template-columns: 125px 200px 125px;
grid-template-rows: 250px 100px;
justify-content: center;
align-content: center;
align-items: end;
justify-items: end;
}
11. Latihan 10
.el--3 {
align-self: center;
justify-self: center;
}
12. Latihan CSS Grid 1
.row {
display: flex;
align-items: flex-start;
gap: 75px;
margin-bottom: 60px;
}
article {
flex: 1;
margin-bottom: 0;
}
aside {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: 0 0 300px;
}
13. Latihan CSS Grid 2
.container {
display: grid;
grid-template-columns: 1fr 300px;
}
14. Latihan CSS Grid 3
.main-header {
grid-column: 1 / -1;
}
15. Latihan CSS Grid 4
.container {
display: grid;
grid-template-columns: 1fr 300px;
}
.main-header {
grid-column: 1 / -1;
}
footer {
background-color: green;
grid-column: 1 / -1;
}
16. Latihan CSS Grid 5
.container {
display: grid;
grid-template-columns: 1fr 300px;
column-gap: 75px;
row-gap: 60px;
align-items: start;
}
.main-header {
grid-column: 1 / -1;
}
footer {
background-color: green;
grid-column: 1 / -1;
}
Komentar
Posting Komentar