- Column address: CSS features and applications
- Author: Front-end Xiao Dong
A list,
Grid Layout (hereinafter referred to as Grid Layout), is a two-dimensional layout system based on Grid, designed to revolutionize the design of grid-based user interfaces. CSS has never been good enough at layout. At first, we used tables, then float, position, and inline-block, which were essentially hacks and left a lot of important functionality unresolved (such as vertical centering). While flex flex layouts can do this, flex layouts are actually one-dimensional, whereas Grid layouts are two-dimensional, and are far more powerful than Flex layouts. Here’s how Grid layouts work with browsers. Supports Chrome57+, Edge16+, Firefox52+, Safari10.1+, etc
Containers and items
Areas that use a grid layout are called containers. Inside the container, grid-positioned child elements are called “items”.
Row, column, cell, region, grid line
The horizontal areas inside the container are called rows, and the vertical areas are called columns. The area where rows and columns intersect is called a cell. Normally, n rows and m columns produce n x m cells. For example, for example: 3 rows and 3 columns will produce 9 cells. A certain number of cells can form an “area”. The area must be square or rectangular, but not any other shape.
The lines that divide a grid are called grid lines. The horizontal grid line divides the travel, and the vertical grid line divides the train. Normally, row N has N + 1 horizontal grid lines and column M has M + 1 vertical grid lines, for example, row 3 has four horizontal grid lines.
4. Container properties
4.1 display: grid， display: grid: inline-grid
Display: grid Specifies a grid layout for a container
By default, grids are block-level elements, and you can use display: inline-grid to set the grid to inline elements
4.2 the grid – the template – the columns, the grid – the template – rows
The grid-template-columns attribute defines the column width of each column, and the grid-template-rows attribute defines the row height of each row
grid-template-columns<rows>: length | percent | auto | fr
Copy the codeDefine a grid with three rows and three columns, 100px column width and row height
.mian {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.main div {
background: pink;
}
Copy the code
In addition to using absolute units, you can also use percentages
.main {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
Copy the code
You can also use auto, where the child ADAPTS to the remaining size of the parent container
.main {
display: grid;
grid-template-columns: 100px 50px auto;
grid-template-rows: 100px auto 50px;
}
Copy the code
Finally, you can use the recommended keyword FR, which can be understood as a ratio value, to divide rows and columns into three parts
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
Copy the code
Divide the second row and the second column into two parts
.main {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
Copy the code
4.3 the grid – the template – areas
Grid layouts allow you to specify “areas”, an area consisting of one or more cells. The grid-template-Areas attribute is used to define areas
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
Copy the code
You can combine multiple cells into a single area, which grid-Area will cover later, but I won’t go into that here
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a b'
'a a b'
'c c c';
}
.main div:nth-child(1) {
grid-area: a;
background: skyblue;
}
Copy the code
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a b'
'a a b'
'c c c';
}
.main div:nth-child(1) {
grid-area: a;
}
.main div:nth-child(2) {
grid-area: b;
}
.main div:nth-child(3) {
grid-area: c;
}
Copy the code
4.4 the grid – the template
The grid-template attribute is a combination of grid-template-columns, grid-template-rows, and grid-template-areas. But it’s not recommended to write them all together, so I’m not going to show you examples here, because these attributes are inherently hard to remember. Grid-template can be found on MDN
4.5 the grid – row – gap, the grid – column – gap
Grid-row-gap sets the spacing between rows (row spacing), and grid-column-gap sets the spacing between columns (column spacing). The CSS Grid Layout was originally defined with grid-row-gap attributes, and is now being replaced by row-gap attributes. Because other layouts can also use the gap attribute, such as Flex elastic layouts. However, to be compatible with browsers that don’t support row-gap attributes, you need to use prefixed attributes like the example above. See MDN’s introduction to row-gap for details
grid-row<column>-gap: length
Copy the code.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
row-gap: 20px;
column-gap: 20px;
}
Copy the code
You can see that there is 20px more space between the rows and columns
4.6 the grid – gap
Grid-gap is a combination of grid-column-gap and grid-row-gap, which has been gradually replaced by gap
grid-gap: <grid-row-gap><grid-column-gap>;
Copy the code.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
gap: 50px;
}
Copy the code
4.7 the justify – items, align – items
The justify-items property sets the horizontal position of the cell content, and the align-items property sets the vertical position of the cell content, both of which default to Stretch
justify-items<align-items>: start | end | center | stretch;
Copy the codeFirst let’s define a grid with 3 rows and 3 columns
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.main div {
background: pink;
}
Copy the code
Why is it possible to fill the entire parent container with no given child width and height? The reason is that horizontal and vertical stretch is the default, i.e.
.main div { justify-items: stretch; align-items: stretch; }Copy the codeIf we set the width and height of the child:
.main div {
width: 50px;
height: 50px;
}
Copy the code
Although the width and height of the subitems have changed, the actual size of the grid remains the same, as can be seen from the debugging tool:
In this case, you can use justify-items, align-items to align the position of the child items
Rows and columns are centered
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: center;
align-items: center;
}
.main div {
width: 50px;
height: 50px;
background: pink;
}
Copy the code
Rows and columns are tail-aligned
.main {
justify-items: end;
align-items: end;
}
Copy the code
4.8 place – the items
The place-items property is a combination of the align-items and context-items properties, noting that vertical alignment comes first and horizontal alignment comes second. If you write only one, the default is vertical and horizontal.
place-items: <align-items><justify-items>;
Copy the code.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
place-items: center;
}
.main div {
width: 50px;
height: 50px;
background: pink;
}
Copy the code
4.9 the justify – the content, the align – content
The context-content attribute is the horizontal position of the entire content area in the container, and the align-content attribute is the vertical position of the entire content area. The default is start
justify-content<align-content>: start | end | center | stretch | space-around | space-between | space-evenly;
Copy the codeStart by defining a grid layout with 3 rows and 3 columns
.main {
width: 500px;
height: 500px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.main div {
background: pink;
}
Copy the code
Align toward the end
.main {
justify-content: end;
align-content: end;
}
Copy the code
Align center
.main {
justify-content: center;
align-content: center;
}
Copy the code
full-justified
.main{ justify-content: space-between; align-content: space-between; }Copy the code
Children are equally spaced from each other
.main {
justify-content: space-around;
align-content: space-around;
}
Copy the code
Children are equidistant from each other, and children are equidistant from the container border
.main {
justify-content: space-evenly;
align-content: space-evenly;
}
Copy the code
Other cases will not continue to show, you can try
4.10 place – the content
The place-content attribute is a combination of the align-content and context-content attributes. As with place-items, vertical is front and horizontal is back. If you write only one, the default is vertical and horizontal.
place-content: <align-content><justify-content>
Copy the code.main {
place-content: center;
}
Copy the code
Align-items vs. context-content, align-content
These two pairs of properties are similar to flex’s elastic layout and are often confused. Unlike Flex’s layout, both pairs of properties apply to the parent container, and flex’s context-content, The align-items attribute is applied to the parent container, but there is no justify-items, align-content attribute. In Grid layouts, context-items and align-items are used together, and context-content and align-content are used together
So when do you use context-items, align-items, and when do you use context-content, align-content?
One trick to keep in mind:
(1) When the size of the subitem is lower than the size of the cell, usejustify-items ， align-items
Remember, the size of the child can be smaller than the cell, for example, the cell size is 100*100 and the child size is only 50*50. Use context-items, align-items in this case.
(2) When the container size is larger than the cell size, usejustify-content ， align-content
4.12 Display grid and implicit grid
Normally, we define for example a grid of three rows and three columns with nine elements in total, so those nine elements cover the entire container, and those nine subitems are display grids
.main {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.main div {
background: pink;
}
Copy the code
What if there are more than nine subitems? For example, number 10, number 11, number 12….. ?? These extra meshes are implicit meshes, which by default are arranged according to the direction of rows, and the height automatically stretches over the container
4.13 the grid – auto – flow
Now that you understand what a display grid is and what an implicit grid is, you can look at grid-auto-flow. After the grid is divided, the children of the container are automatically placed in each grid, in order. The default placement order is “first column after column”, that is, the first row is filled before the second row is started. Grid-auto-flow: rows is the default setting that determines the order in which the grid is arranged
grid-auto-flow: rows | column | ros dense | column dense;
Copy the codeSet the order to column before row, grid-auto-flow: column
.main {
width: 500px;
height: 500px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
}
.main div {
background: pink;
}
Copy the code
If grid 1 and grid 2 occupy two cells each, then with the default grid-Auto-flow: ROW, the layout looks like this
In the figure above, the positions behind grid 1 and 2 are empty, because grid 3 follows grid 2 by default. Set Grid-Auto-flow: Row dense to cover the empty positions
.main {
width: 300px;
height: 400px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: row dense;
}
Copy the code
If it’s column first, row later
.main {
width: 500px;
height: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column
}
Copy the code4.14 the grid – auto – rows, the grid – auto – the columns
The column width of the implicit grid is the same as that of the display grid by default, and the row height is stretched full. The row height of the implicit grid is the same as that of the display grid by default. Can the height or width of an implicit grid only be pulled up? Of course not. You can use grid-auto-rows, grid-auto-columns to control the row height and column width of an implicit grid
Set the implicit grid row height to 50px in the first column order
.main {
width: 500px;
height: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: rows;
grid-auto-rows: 50px;
}
Copy the code
Set the implicit grid column height to 50px for column first and row after column
.main {
width: 500px;
height: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
grid-auto-columns: 50px;
}
Copy the code
Set the line height of the implicit grid to 100px so that it is the same size as the display grid
.main {
width: 500px;
height: 400px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 100px;
}
Copy the code
4.15 Repeat () method with auto-fill keyword
Grid-template-columns and grid-template-rows are used to write multiple duplicate columns, such as grid-template-columns: 100px 100px 100px, simple grid can be defined like this, but if there are too many grids, why write it like this? grid-template-columns: 100px 100px 100px 100px 100px …… , which is cumbersome, you can use repeat() to simplify repeating values
repeat(number, length | percent | fr)
Copy the codeDefine a grid with 5 rows and 4 columns
.main {
display: grid;
grid-template-columns: repeat(5.100px);
grid-template-rows: repeat(4.100px);
}
Copy the code
You can also use specific values with the repeat() function
.main {
display: grid;
grid-template-columns: 200px repeat(2.100px);
grid-template-rows: 200px repeat(2.100px);
}
Copy the code
In other cases, the width of the container can sometimes hold more grids, but because the number of columns or rows is defined is smaller
.main {
width: 500px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
Copy the code
Repeat (3, 100px) is used to define three columns. What can be done if the size of the cell is fixed but the size of the container is uncertain? Make each row (or column) contain as many cells as possible, using the auto-fill keyword for auto-fill
.main {
width: 500px;
background: skyblue;
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(3.100px);
}
Copy the code
4.16 minmax () method
The minmax() function produces a length range that indicates that the length is within that range. It takes two parameters, a minimum and a maximum.
minmax(min, max)
Copy the codeDefine a grid whose column width and row height are at least 100px and not more than 200px
.main {
display: grid;
grid-template-columns: minmax(100px.200px) minmax(100px.200px) minmax(100px.200px);
grid-template-rows: minmax(100px.200px) minmax(100px.200px) minmax(100px.200px);
}
Copy the code
The minmax() method can be used with the repeat() method
.main {
display: grid;
grid-template-columns: repeat(3.minmax(100px.150px));
grid-template-rows: 100px 100px 100px;
}
Copy the code
5. Project attributes
5.1 the grid – area
Start by defining a grid with three rows and three columns
By default, grid numbers are sorted in order. Is there any way to specify where to place them? The grid-area attribute can specify which areas the project will be placed in, but only if the areas have been specified using the grid-template-Areas attribute first
Place grid 1 in area E
.main {
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.main div:nth-child(1) {
grid-area: e;
background: chartreuse;
}
Copy the code
5.2 Grid-column-start, grid-column-end and grid-row-start, grid-row-end and span keywords
These two pairs of attributes represent the starting and ending positions of the area occupied by the grid child by specifying which grid line is located on each of the project’s four borders
grid-column-startProperty: Vertical gridline with the left bordergrid-column-endProperty: Vertical gridline on which the right border is locatedgrid-row-startProperty: horizontal gridline on which the top border is locatedgrid-row-endProperty: horizontal gridline on which the bottom border is located
How do I view my grid line? You can use your browser’s debugging tool to display the grid line numbers
The grid – column – the start and the grid – column – end
.main {
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
.main div {
background: pink;
grid-column-start: 1;
grid-column-end: 3;
}
Copy the code
The grid – row – the start and the grid – row – end
.main {
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
.main div {
background: pink;
grid-row-start: 2;
grid-row-end: 3;
}
Copy the code
Both pairs of attributes are used together
.main div {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
Copy the code
In addition to using this method, you can also name the grid lines directly and get the same effect. Use the debug tool to see how the grid lines are named
.main {
background: skyblue;
display: grid;
grid-template-columns: [col1] 100px [col2] 100px [col3] 100px [col4];
grid-template-rows: [row1] 100px [row2] 100px [row3] 100px [row4];
}
.main div {
grid-column-start: col2;
grid-column-end: col3;
grid-row-start: row2;
grid-row-end: row3;
}
Copy the code
The two pairs of properties can also use the SPAN keyword, which means “span”, or how many grids are crossed between the left and right (top and bottom) borders
grid-column<row>-start: span number;
Copy the code.main div {
grid-column-start: span 2;
}
Copy the code
.main div {
grid-column-start: 2;
grid-column-end: span 2;
}
Copy the code
5.3 the grid – row, gird – column
Grid-column is a combination of grid-column-start and grid-column-end, and grid-row is a combination of grid-row-start and grid-row-end
grid-column: <start-line>/ <end-line>;
grid-row: <start-line>/ <end-line>;
Copy the code.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* is the same as */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
Copy the codeYou can also use the SPAN keyword between these two properties to indicate how many grids to span
.item-1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
/* is the same as */
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
Copy the codeThe slash and the following part can be omitted and by default spans a grid
.item-1 {
grid-column: 1;
grid-row: 1;
}
Copy the codeThe same effect can be achieved with grid-Area
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
Copy the code.main {
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
.main div {
background: pink;
grid-area: 2 / 2 / 3 / 3;
}
Copy the code
5.4 the justify – self, align – self
The sequence-self property sets the horizontal position of the cell’s content (left – center right), exactly as the sequence-items property is used, but only for a single item
The align-self property sets the vertical position (top, middle, bottom) of the cell’s contents, exactly as the align-items property is used for a single item
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
Copy the code- Start: Aligns the beginning edge of the cell
- End: Aligns the end edge of the cell
- Center: Cell is internally centered
- Stretch: stretches to fill the entire width of a cell (default)
.main {
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
.main div {
width: 50px;
height: 50px;
background: pink;
grid-area: 2 / 2 / 3 / 3;
justify-self: end;
align-self: end;
}
Copy the code
5.5 place – self
The place-self attribute is a combination of the align-self and context-self attributes. If the second value is omitted, the place-self attribute assumes that the two values are equal
place-self: <align-self><justify-self>;
Copy the code.main {
background: skyblue;
display: grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
}
.main div {
width: 50px;
height: 50px;
background: pink;
grid-area: 2 / 2 / 3 / 3;
place-self: center;
}
Copy the code
Six, layout cases
6.1 Grid layout
Grid layouts can be easily implemented with grid layouts
.row {
background: skyblue;
display: grid;
grid-template-columns: repeat(12.1fr);
grid-template-rows: 50px;
grid-auto-rows: 50px;
}
.row div {
background: pink;
border: 1px black solid;
}
.row .col-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-12 {
grid-area: auto/auto/auto/span 12;
}
Copy the code<div class="row">
<div class="col-6">1</div>
<div class="col-3">2</div>
<div class="col-4">3</div>
<div class="col-5">4</div>
</div>
Copy the code
6.2 Irregular arrangement of subitems
If you want to achieve this, you can easily do it with a grid layout
.main {
width: 308px;
margin: 20px auto;
}
.main-list {
height: 352px;
margin: 0 14px;
display: grid;
grid-template-columns: repeat(3.1fr);
grid-template-rows: repeat(4.1fr);
grid-template-areas:
"a1 a3 a3"
"a2 a3 a3"
"a4 a4 a5"
"a6 a7 a7";
gap: 8px;
}
.main-list div:nth-of-type(1) {
grid-area: a1;
}
.main-list div:nth-of-type(2) {
grid-area: a2;
}
.main-list div:nth-of-type(3) {
grid-area: a3;
}
.main-list div:nth-of-type(4) {
grid-area: a4;
}
.main-list div:nth-of-type(5) {
grid-area: a5;
}
.main-list div:nth-of-type(6) {
grid-area: a6;
}
.main-list div:nth-of-type(7) {
grid-area: a7;
}
.main-list a {
width: 100%;
height: 100%;
display: block;
line-height: 30px;
}
.main-list h3 {
text-align: right;
margin-right: 4px;
}
.main-list p {
text-align: center;
}
.theme1 {
background: pink;
}
.theme2 {
background: skyblue;
}
.theme3 {
background: orange;
}
Copy the code<div class="main">
<div class="main-list">
<div class="theme1"></div>
<div class="theme2"></div>
<div class="theme1"></div>
<div class="theme1"></div>
<div class="theme1"></div>
<div class="theme3"></div>
<div class="theme3"></div>
</div>
</div>
Copy the code
6.3 More Layout Cases
Grid by Example
Seven,
The Grid layout is one of the most popular CSS layouts, along with flex flex layouts. Its advantage is that it can achieve multi-row multi-column layout, belongs to the two-dimensional layout, can basically meet any layout page.
Advantages:
- Fixed and flexible track sizes
- You can use line numbers, names, or precise locations on the grid to place items by locating grid areas
- Multiple items can be placed into grid cells or regions that can partially overlap each other
Disadvantages:
-
Browser compatibility is poor
-
Higher learning costs
The Grid layout is arguably the most powerful CSS layout scheme available. In the actual development process, grid layout and Flex layout are often used together.
Eight, reference
- MDN
- Ruan Yifeng: Grid layout tutorial
- A Complete Guide to Grid
- caniuse.com
- Grid by Example