The overall introduction of CSS Grid layout, and a simple practice.
CSS Grid system is exactly functioning like its name’s declining. It separates the web page into grids on different rows and columns, then specifies a series of properties which can be used to put and style the items in the grids. Each row and column has its own number (starting from 1), which can be inspected from Firfox dev tool.
Here is a example for how to use the grid layout to create a nice page link.
First create the layout using html. If use Emmet, the comment can be .container>.grid*8, then specify each class and text inside.
1 | <div class="container"> |
First specify the layout for the container as grid. Then use grid-template-rows and grid-template-columns to specify the number of rows and columns in the layout. grid-gap defines the gap between rows and columns. The unit fr here means one unit from the rest space.
1 | .container { |
Then we can put elements onto the layout using 3 different ways.
- Basic
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.header {
grid-row: 1 / 2;
grid-column: 1 / -1;
}
.sidebar {
grid-row: 2 / span 2;
grid-column: 4 / -1;
}
.main {
grid-row: 3 / 4;
grid-column: 1 / 4;
}
.footer {
grid-area: 4 / 1 / 5 / 5;
}
grid-row is used to specify the start / end of the rows the item takes. Similar as grid-column property which is for columns. span here means how many grid it spans from the start. -1 means go till the end. grid-area, the value is in order: row-start / column-start / row-end / column-end.
- Naming Lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22.container {
display: grid;
grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 1fr [main-end footer-start] 100px [footer-end];
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
grid-gap: 20px;
}
.header {
grid-row: header-start / header-end;
grid-column: col-start 1 / grid-end;
}
.sidebar {
grid-row: header-end / main-end;
grid-column: col-end 3 / grid-end;
}
.main {
grid-row: box-end / main-end;
grid-column: col-start 1 / col-end 3;
}
.footer {
grid-row: footer-start / footer-end;
grid-column: col-start 1 / -1;
}
First in the container, specify the name of each line on the rows and columns, then in the items we can use those names when we define row and column start and end position.
- Naming Area
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.container {
display: grid;
grid-template-rows: 100px 200px 1fr 100px;
grid-template-columns: repeat(3, 1fr) 200px;
grid-template-areas: "header header header header"
"box1 box2 box3 side"
"main main main side"
"footer footer footer footer";
grid-gap: 20px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: side;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
First give each grid in the area a name, it can be duplicated or empty (. means empty). Then we can use grid-area to specify the name for each item, the system will be able to put the item has the name same as the grid name to the area.
