Grid layout (Grid) is the most powerful CSS layout solution.
It divides web pages into grids, and you can combine different grids to create various layouts. In the past, effects that could only be achieved through complex CSS frameworks are now built into browsers.
The layout shown above,
Containers and Items
An area with a grid layout is called a "container". The child elements using grid positioning inside the container are called "items"
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
The outermost <div>element is the container, and the three inner <div>elements are items.
Rows and Columns
The horizontal area inside the container is called a "row", and the vertical area is called a "column"
The horizontal dark areas are "rows" and the vertical dark areas are "columns"
Cell
The intersection area of rows and columns is called a "cell".
Normally, nrows and mcolumns produce n x mcells. For example, 3 rows and 3 columns will produce 9 cells
Gridlines
The lines that divide the grid are called "grid lines". Horizontal grid lines divide rows, and vertical grid lines divide columns.
Normally, nrows have n + 1horizontal grid lines and mcolumns have m + 1vertical grid lines. For example, three rows have four horizontal grid lines.
A 4 x 4 grid with 5 horizontal grid lines and 5 vertical grid lines
1. Container properties
After the container specifies the grid layout, it must then divide the rows and columns.
grid-template-columnsProperty defines the column width of each column
grid-template-rowsProperty defines the row height of each row
In addition to using absolute units, you can also use percentages
#container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
repeat()
Sometimes, it is very troublesome to write the same value repeatedly, especially when there are many grids. At this time, you can use repeat()functions to simplify repeated values
#container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
auto-fill keyword
Sometimes, the size of the cell is fixed, but the size of the container is undefined. If you want each row (or column) to accommodate as many cells as possible, you can use auto-fillkeywords to indicate automatic filling.
#container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr keyword
In order to conveniently express proportional relationships, grid layout provides frkeywords (abbreviation of fraction, meaning "fragment"). 1frIf the width of two columns is and respectively 2fr, it means that the latter is twice the width of the former.
#container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#container{
display: grid;
/* display: inline-grid; */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px 100px;
/* grid-template-rows: 33.3% 33.3% 33.3%;
grid-template-columns: 200px 200px 200px; */
/* grid-template-rows: repeat(3,200px);
grid-template-columns: repeat(3,100px); */
/* grid-template-rows: repeat(auto-fill,200px);
grid-template-columns: repeat(auto-fill,400px); */
/* grid-template-rows: 100px 100px;
grid-template-columns: 1fr 1fr 1fr 2fr 3fr; */
}
.item{
font-size: 50px;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1{
background-color: aqua;
}
.item-2{
background-color: blue;
}
.item-3{
background-color: orange;
}
.item-4{
background-color: green;
}
.item-5{
background-color: greenyellow;
}
.item-6{