Grid
Defines the element as a grid container and establishes a new grid formatting context for its contents.
*You can check the grid more clearly on firefox.
- display: grid generates a block-level grid
- display: inline-grid; generates an inline-level grid; (it behaves like inline-block)
.container {
display: grid;
/* display: inline-grid; */
}
- grid container: the outer area of grid.
- grid item: the children of grid container.
- grid track: row or column of grid.
- grid line: line the defines each grid cells.
- grid number: number of each grid's line.
- grid gap: space between each grid cells.
- grid area: all set of grid cells.
Grid row / column
Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
grid columns: The vertical lines of grid items are called columns.
grid rows: The horizontal lines of grid items are called rows.
- grid-template-columns sets the number of columns and size of the columns in a grid.
- grid-template-rows sets the number of rows and height of the rows in a grid.
.container {
grid-template-columns: 1fr 1fr 1fr;
/* grid-template-columns: 1fr 50px 1fr 1fr; */
/* grid-template-rows: 100px 1fr; */
/* make columns of 200px, 2fr(2/3 of what's left which is total - 200px), 1fr(2/3 of what's left) */
grid-template-columns: 200px 2fr 1fr;
}
Gap
grid-gap, gap: Sets the gap between rows and columns.
grid-row-gap: Sets the size of the gap between the rows in a grid layout. 0 is the default value
grid-column-gap: Sets the size of the gap between the columns in a grid layout. 0 is the default value
/* Set the gap between rows to 20px, and the columns to 50px */
.grid-container {
grid-gap: 20px 50px;
}
/* repeat 3 times of 1fr */
grid-template-columns: repeat(3, 1fr);
/* this is the same as above */
grid-template-columns: repeat(1fr 1fr 1fr);
/* you can also write like this */
repeat(3, 1fr 4fr 2fr);
Selecting area of cells
- grid-column-start
- grid-column-end
- gird-column
- grid-row-start
- grid-row-end
- gird-row
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="reset.css">
<style>
ul {
display: grid;
height: 100vh;
grid-template-columns: repeat(5, 1fr);
}
li {
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
.first {
grid-column: 1/4;
grid-row: 1/3;
}
.second {
grid-column: 4/6;
grid-row: 1/4;
}
.third {
grid-column: 1/3;
/* grid-row: 3/4; */
}
/* .fourth {
grid-column: 3/4;
grid-row: 3/4;
} */
.fifth {
grid-column: 1/3;
grid-row: 4/6;
}
.sixth {
grid-column: 3/6;
grid-row: 4/6;
}
</style>
</head>
<body>
</body>
<!-- ul>li{$}*25 -->
<ul>
<li class="first"><img src="image-grid/1.jpg" alt="">1</li>
<li class="second"><img src="image-grid/6.jpg" alt="">2</li>
<li class="third"><img src="image-grid/2.jpg" alt="">3</li>
<li class="fourth"><img src="image-grid/5.webp" alt="">4</li>
<li class="fifth"><img src="image-grid/3.webp" alt="">5</li>
<li class="sixth"><img src="image-grid/4.jpg" alt="">6</li>
</ul>
</html>
*find more about grid in Korean/in English
Top comments (0)