This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
The introduction
This article covers most of the grid layout 🙄 🥬🥬, an online code example for each property parameter 😎, please give a like if you think this article is good
1. The grid layout
The idea of grid layout is to divide web pages into grids and combine them into different layouts, and then fill the grids to form a web page. Learn the basic concepts of the Grid through this example 👇👇
Classic nine-grid layout:
🚨 key points 🚨: Container: Use display: grid to set the container as grid container. The container contains all items. Row: horizontal row, corresponding to the color block 123 Row spacing: the space between the upper and lower items is row spacing. The space between the left and right items is the column margin item (child) : 123456789 color block edge: Each ITme has four edges, up, down, left, right
1.1 display
The display property specifies whether/how elements are displayed. We need to use grid layout, so we need to set the container to grid or inline-grid. The grid layout is set to block level element inline-grid.
.grid_container {
display:grid;
/* display:inline-grid; * /
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
Copy the code1.2 grid-template-columns 和 grid-template-rows
The grid-template-rows attribute defines the height of each row in a grid layout. Online code entry 👉👉(Click to send) Define three rows and three columns, each 100px wide and each 100px high
.grid_container {
display:grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
Copy the codeExample 2: online entry 👉👉(Click transfer) When there are many rows and columns, the normal writing method is not practical, so now we introduce a function repeat() repeat() to set the same value, or repeat a pattern, again using three rows and three columns 100px as an example:
.grid_container {
display:grid;
/* Repeat a value */
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
Grid-template-columns: repeat(3,100px 50px); /* Repeat (3,100px 50px); The grid - the template - rows: repeat (3100 px 50 px); * /
}
Copy the codeCode Case 3: Online code entry 👉👉(Click to send) Here’s the grail layout as an example: fixed left and right, adaptive in the middle. In this case a fixed column width or row height is no longer sufficient to achieve the Holy Grail layout, so this example introduces two keywords auto and FR auto: adaptive property FR: fraction, which can be regarded as a percentage property. To help understand this keyword, use auto as an example:
.grid_container {
display:grid;
/* The left and right columns are 150px, and the middle column is adaptive */
grid-template-columns: 150px auto 150px;
/* Each row is 300px high */
grid-template-rows: repeat(1.300px);
}
Copy the code
以frFor example: left and right column proportion 2/10 = 20%, middle column proportion 6/10 = 60%,Notice 10 = 2+6+2
#grid_container{
display: grid;
grid-template-columns: 2fr 6fr 2fr;
grid-template-rows: repeat(1.300px);
}
Copy the code
Code Case 4:Online code entry 👉👉(Click to send)
When the requirement is that each item child is only 100px in width and height, but the container width is self-adaptive, we don’t know how many rows and columns should be set, so we introduce a keyword hereauto-fill
auto-fill: Automatic filling
⚠ ️ note:grid-template-rowsTo use keywords, the container must have a fixed height ⚠️
#grid_container{
display: grid;
height:500px;
grid-template-columns: repeat(auto-fill,100px);
grid-template-rows: repeat(auto-fill,100px);
}
Copy the code👉👉(Click send) Errors occur when the grid layout’s children are set to adaptive widths, so to avoid this error, we must have a minimum width, so here we introduce a function minmax() minmax() : Set a length range with 1: minimum, 2: maximum example: minimum 500px, maximum 6fr
.grid_container {
display:grid;
width:600px;
grid-template-columns: 2fr minmax(500px.6fr) 2fr;
/* See the difference */
/* grid-template-columns: 2fr 6fr 2fr; */
grid-template-rows: repeat(1.300px);
}
Copy the code1.3 the grid – the template – areas
1.3 grid-template-areas
Grid-template-areas: Used to divide areas. The following example can help you understand code Case 1: Online code entry 👉👉(click to send) 1, divide a to I nine regions 2, or each row divide a region, three lines is a b C three regions 2, of course can not divide part of the region, use (.) Dots indicate areas that do not need to be divided
.grid_container {
display:grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
/* Divide into nine regions */
grid-template-areas:
'a b c'
'd e f'
'g h i';
/* Divide three regions */
/* grid-template-areas: 'a a a' 'b b b' 'c c c'; * /
/* No partial partition */
/* grid-template-areas: 'a . c' 'a . c' 'a . c'; * /
}
Copy the codeThe use of the partition will be explained later along with other attributes!!
1.4 grid-row-gap 和 grid-column-gap 和 grid-gap
Grid-row-gap: row spacing grid-column-gap: column spacing grid-gap: short form of row spacing and column spacing, for example: grid-gap:
;
Code Case 1: Online code entry 👉👉(Click to send) Here take the simplest of the nine grids as an example
.grid_container {
display:grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
grid-row-gap:10px;
grid-column-gap:20px;
/* The following statement has the same spacing as the above statement
/* grid-gap:10px 20px; * /
}
Copy the code
1.5 grid-auto-flow
Grid-auto-flow: Sets the grid layout order, normally from left to right for each item child, in special cases we can change the order, such as from top to bottom. Optional values: left to right row, top to bottom column, dense left to right row dense, dense from top to bottom column dense. Setting grid-auto-flow to row and column normally produces the following two effects: Row on the left and Column on the right
Here again, using the ninth grid as an example, we willThe number 1 和 The number 2 和 The number 3Squares are set to occupy 2 cells each when ingrid-auto-flowProperty defaults to equal torowThis is what happens
When we set the code to be dense left to rightrow dense“, the layout will be filled as much as possible, without the Spaces shown above
The code is as follows:Online code entry 👉👉(Click to send)
.grid_container {
display:grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
/* Default, left to right */
grid-auto-flow:row;
/* Dense type from left to right please turn on the mask */
/* grid-auto-flow:row dense; * /
}
.item-1 {
background-color: #B53471;
grid-column-start: 1;
grid-column-end: 3;
}
.item-2 {
background-color: #ffcccc;
grid-column-start: 1;
grid-column-end: 3;
}
.item-3 {
background-color: #ff4d4d;
grid-column-start: 1;
grid-column-end: 3;
}
Copy the codeFrom the above example, it is clear that dense is just filling the container as much as possible, so the column dense example is not much to be analyzed, online code entry 👉👉(click to transmit)
1.6 justify-items 和 align-items 和 place-items
Property Description context-items: sets the horizontal position of the item child content align-items: sets the vertical position of the item child content place-items: short for the align-items and context-items properties, If the second value is omitted, the second value is considered equal to the first value
place-items: <align-items> <justify-items>
Copy the codeOptional values for properties (all three properties have the following optional values)
| An optional value | Optional Value Description |
|---|---|
| start | Aligns the start border of the child element container |
| end | Aligns the end border of the child element container |
| center | The child element container is internally centered |
| stretch | When the size of the item child element is not specified, the stretch takes up the entire grid container |
Start case:Online code entry 👉👉(Click to send)
Align the start border of the child element container,justify-itemsAlign the horizontal start border,align-itemsAlign the vertical start border
End case:Online code entry 👉👉(Click to send)
Align the end border of the child element container,justify-itemsAlign the horizontal end border,align-itemsAlign the vertical end border
Center case:Online code entry 👉👉(Click to send)
The child element container is internally centered,justify-itemsHorizontally centered,align-itemsVertical center
Stretch case:Online code entry 👉👉(Click to send)
Default is this property, as long as the width and height are not set will be stretched over
1.7 justify-content 和 align-content 和 place-content
Note that the difference between these three properties and the 1.6 description is that context-items and align-items and place-items are for child element content, Context-content and align-content and place-content are for grid container content
Property Description context-content: sets the horizontal position of the grid layout container content. Align-content: sets the vertical position of the grid layout container content. Place-content :align-content and context-content Shorthand for two properties in which the second value is considered equal to the first if omitted
place-content: <align-content> <justify-content>
Copy the codeOptional values for properties (all three properties have the following optional values)
| An optional value | Optional Value Description |
|---|---|
| start | Align the start border of the Grid container |
| end | Align the end border of the Grid container |
| center | The grid container is internally centered |
| stretch | When the grid container content size is not specified, stretch takes up the entire grid container |
| space-around | Each child element is equally spaced, so the child elements are twice as spaced as the container borders |
| space-between | Child elements are equally spaced from child elements, and there is no spacing between child elements and container borders |
| space-evenly | Children are equally spaced from each other, and children are equally spaced from the container border |
Start example: online code entry 👉👉(click Send) Align the horizontal and vertical start borders of the container, justify-content to the horizontal start border, and justify-content to the vertical start border
justify-content:start;
align-content:start;
Copy the code
End case: online code entry 👉👉(click Send) Align the horizontal and vertical closing borders of the container, justify-content to the horizontal closing border, align-content to the vertical closing border
justify-content:end;
align-content:end;
Copy the code
Center example: online code entry 👉👉(Click To send) Center container content horizontally and vertically, justify-content horizontally centered, align-content vertically centered
justify-content:center;
align-content:center;
Copy the code
👉👉(Click to send) Automatically stretch the grid container, justify-content horizontally, align-content vertically
justify-content:stretch;
align-content:stretch;
Copy the code
Space-around case: online code entry 👉👉(Click Transfer) Each child element is spaced equally on both sides, so the space between the children is twice as large as the space between the container borders
justify-content:space-around;
align-content:space-around;
Copy the code
Space-between case: online code entry 👉👉(Click to transfer) Child elements are equally spaced between child elements and container borders
justify-content:space-between;
align-content:space-between;
Copy the code
Space-instituted: online code entry 👉👉(click transfer) Child elements are evenly spaced, and child elements are evenly spaced from the container border
justify-content:space-evenly;
align-content:space-evenly;
Copy the code
1.8 grid-auto-columns 和 grid-auto-rows
Grid-auto-rows: set the column width of the redundant columns. Grid-auto-rows: set the column width of the redundant columns. In some cases, we may have 10 item child elements in a 9-grid layout. Normally, the first 9 child elements are set with appropriate width and height, but if the tenth element is not set, there will be abnormal layout. The following case can help to understand
When usinggrid-auto-flow:column;The following happens when you change the default placement order
So when the above situation occurs, usegrid-auto-columns 和 grid-auto-rowsTo solve the problemOnline code entry 👉👉(Click to send), modify the case code to observe the changes.
.grid_container {
grid-auto-columns:100px;
grid-auto-rows:100px;
}
Copy the code
1.9 grid-template 和 grid
The grid-template attribute is a combination of grid-template-columns, grid-template-rows, and grid-template-areas. Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, and areas. Grid-auto-rows, grid-auto-columns, and grid-auto-flow are combined abbreviations.
The usage of these two attributes is complicated, so we will consider writing a new article to explain it later. If you need it, please leave a message in the comment section. If the number of messages is large, the new article will be published as soon as possible
2.0 (Child elements)grid-column-start 和 grid-column-end 和 grid-row-start 和 grid-row-endandgrid-columnandgrid-row
| The property name | Attributes that |
|---|---|
| grid-column-start | Setting child elementsThe left marginThe grid line where |
| grid-column-end | Setting child elementsRight marginThe grid line where |
| grid-row-start | Setting child elementsOn the borderThe grid line where |
| grid-row-end | Setting child elementsUnder the frameThe grid line where |
| grid-column | Set up theThe left marginandRight marginIn the grid line, using/Symbol spacing |
| grid-row | Set up theOn the borderandUnder the frameIn the grid line, using/Symbol spacing |
Horizontal and vertical grid lines are always 1 more than horizontal and vertical child elements. Here are some examples to help you understand
Case 1:Online code entry 👉👉(Click to send)
🥇 when a box wants to occupy fullThe transverseTwo squares, square onegrid-column-startandgrid-column-endSet separately to1and3, or setgrid-column: 1/3
🥈 when a box wants to occupy fullThe longitudinalTwo squares, square onegrid-row-startandgrid-row-endSet separately to1and3, or setgrid-row: 1/3
.item-1 {
background-color: #B53471;
/ * * / laterally
/* grid-column-start: 1; grid-column-end: 3; * /
grid-column: 1/3; /* The same effect */
Vertical / * * /
/* grid-row-start: 1; grid-row-end: 3; * /
grid-row: 1/3; /* The same effect */
}
Copy the code
Case 2:Online code entry 👉👉(Click to send)
🥇 When multiple squares are encountered for attribute setting, it is necessary to consider whether grid lines are contained by other elements, as shown in the figure below:
So on the basis of case 1, we want to putThe length of beep2 is two beepersBe placed inThe original square 4andThe original square 7Then we need to consider that the grid lines already contained in box 1 cannot be used. So when setting the upper border grid line, avoid the vertical second grid line, so we set the upper border grid line to3, the grid line of the lower frame is5
.item-2 {
background-color: #ffcccc;
grid-column: 1/2;
grid-row: 3/5;
}
Copy the codeThe effect is as follows:
2.1 (Child Elements)justify-self 和 align-self 和 place-self
The precy-items property works the same as the align-items and place-items properties, except that the former sets the location of the child content in the grid container uniformly, and the latter sets it individually and overrides the uniform setting.
Context-self: sets the horizontal position align-self: sets the vertical position place-self: short form of the combined context-self and context-self attributes. (Ignore the second value and consider the second value equal to the first value.) Case 1: online code entry 👉👉(Click Send) Center all child element content horizontally and vertically, align the first child element content vertically to end border align-self: end; , justify horizontal end border -self: end; The code and effect are as follows: context-self and align-self override the center display of the context-items and align-items Settings
.grid_container {
justify-items: center;
align-items: center;
}
.item-1 {
justify-self:end;
align-self:end;
background-color: #B53471;
}
Copy the code
2.1 (Child Elements)grid-area
| The property name | Attributes that |
|---|---|
| grid-area | Specifies the region in which the child element is protected |
Example 1: Online code entry 👉👉(click to send) Replace 1, 2, 3 squares with 4, 5, 6 squares in the grid
.grid_container {
display:grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
/* Divide into nine regions */
grid-template-areas:
'a b c'
'd e f'
'g h i';
}
.item-1 {
background-color: #B53471;
grid-area: d;
}
.item-2 {
background-color: #ffcccc;
grid-area: e;
}
.item-3 {
background-color: #ff4d4d;
grid-area: f;
}
Copy the code
Case 2:Online code entry 👉👉(Click to send)
Square 1, 2 and 3 fill two cells vertically and square 4 fill three cells horizontally
.grid_container {
display:grid;
grid-template-columns: repeat(3.100px);
grid-template-rows: repeat(3.100px);
/* Divide three regions */
grid-template-areas:
'a b c'
'a b c'
'd d d';
}
.item-1 {
background-color: #B53471;
grid-area: a;
}
.item-2 {
background-color: #ffcccc;
grid-area: b;
}
.item-3 {
background-color: #ff4d4d;
grid-area: c;
}
.item-4 {
background-color: #ffaf40;
grid-area: d;
}
Copy the code
Grid-related attributes
| The property name | Attributes that | An optional value |
|---|---|---|
| display | Attribute specifies whether/how to display elements | |
| grid-template-columns | Define the column width of each column (you can define grid line names here) | |
| grid-template-rows | Define the row height of each column | |
| grid-template-areas | Divide a specified area, an area consists of one or more cells | |
| grid-template | Attributes aregrid-template-columns,grid-template-rowsandgrid-template-areasThe combined short form of these three properties |
|
| grid-row-gap | Define the spacing between rows | |
| grid-column-gap | Define columns and column spacing | |
| grid-gap | Define the spacing between rows and columns | |
| grid-auto-flow | Set the placement order | By default, the row,column,row dense,column dense |
| justify-items | Property sets the horizontal position of cell content | start,end,center,stretch |
| align-items | Property sets the vertical position of the cell content | start,end,center,stretch |
| place-items | Attributes arealign-itemsProperties andjustify-itemsThe merged short form of a property. If the second value is omitted, the second value is considered equal to the first value |
start,end,center,stretch |
| justify-content | Property sets the horizontal location of the grid container content | start,end,center,stretch,space-around,space-between,space-evenly |
| align-content | Property sets the vertical position of the grid container contentsstart,end,center,stretch,space-around,space-between,space-evenly |
|
| place-content | Attributes arealign-contentProperties andjustify-contentThe merged short form of a property. If the second value is omitted, the second value is considered equal to the first value |
start,end,center,stretch,space-around,space-between,space-evenly |
| grid-auto-columns | Sets the column width of the excess columns | |
| grid-auto-rows | Set the row height of extra rows | |
| grid | Attributes aregrid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,grid-auto-flowThe combined short form of these six properties. |
Grid-item related attributes (this is an attribute written to a child element)
| The property name | Attributes that | An optional value |
|---|---|---|
| grid-column-start | Sets the vertical gridline on which the left border of the child’s position lies | |
| grid-column-end | Sets the vertical gridline on which the right border of the location of the child element is located | |
| grid-row-start | Sets the horizontal gridline on which the border above the location of the child element is located | |
| grid-row-end | Sets the horizontal gridline on which the bottom border of the child element position is located | |
| grid-column | grid-column-start 和 grid-column-endThe shorthand |
|
| grid-row | grid-row-start 和 grid-row-endThe shorthand |
|
| justify-self | Property sets the horizontal position of cell contents (left, middle and right) | start,end,center,stretch, |
| align-self | Property sets the vertical position of the cell content | start,end,center,stretch, |
| place-self | Attributes arealign-selfProperties andjustify-selfThe merged short form of a property. (Ignoring the second value, the second value is considered equal to the first value) |
|
| grid-area | Property specifies which region to place child elements in |
Grid correlation function
| The property name | Attributes that | example | An example |
|---|---|---|---|
| repeat() | Set duplicate values | ||
| minmax() | The function produces a range of length, no less than argument 1 and no more than argument 2 | grid-template-columns: 1fr minmax(100px, 1fr); | minmax(100px, 1fr)Indicates that the column width is not smaller than100pxAnd no greater than1fr |
Keywords available to grid-related functions
| The property name | Attributes that | example | An example |
|---|---|---|---|
| auto-fill | Automatic filling | grid-template-columns: repeat(auto-fill, 100px); | Fill the container in a column 100px wide. You can wrap it |
| fr | The scale property assigns the width and height according to the scale | grid-template-columns: 2fr 8fr; | (2+8=10) 2/10 (20%) in column 1, 8/10 (80%) in column 2 |
| auto | Adaptive width | grid-template-columns: 100px auto 100px; | The left and right widths are 100px and the middle widths are adaptive |