This time to bring you CSS gird layout details, CSS gird layout of the note what, the following is the actual case, together to see.
CSS Grid Layout is a two-dimensional grid-based layout system that is designed to completely change the way we design a Web-based user interface. CSS has been used to lay out our pages, but he has never done a very good job, and at the very beginning we used tables, float
and then, position
and inline-block
. But these are essentially CSS hack, and missing a lot of important features (such as vertical centering), and then Flexbox appeared, but his purpose was simply to make one-dimensional layouts rather than complex two-dimensional layouts. Grid is the first CSS module specifically created to solve layout problems. In terms of browser compatibility, you can look at Caniuse data
Grid container
Applied in the element display: grid
. This is the immediate parent element for all grid layouts, in this case the container
grid container
<p class= "Container" > <p class= "Item item-1" ></p> <p class= "Item Item-2" ></p> <p class= "Item Item-3" ></p></p>
Grid Project
A child of the grid container (for example, a direct child element), where the item
element is a grid item, but sub-item
not
<p class= "Container" > <p class= "item" ></p> <p class= "Item" > <p class= " Sub-item "></p> </p> <p class=" Item "></p></p>
Grid lines
The dividing line that makes up the grid structure, which can be either vertical (column) or horizontal (row). The Yellow line here is an example of a grid line
Grid track
The space between the two adjacent grid lines. You can think of them as columns or rows of grids. This is the grid track between the second row and the third row grid lines
grid cell
The space between two adjacent rows and two adjacent column gridlines, which is a cell in the grid, which is the grid cell between row gridlines 1 and 2, and the column gridlines 2 and 3
Grid Space
The total space surrounded by four grid lines, and the grid space can consist of any number of grid cells. Here is the grid space between lines 1 and 3, and the column gridlines 1 and 3
properties of the grid container
Display
Defines an element as a grid container without its contents creating a new grid format context value:
Gird: Generating block-level grids
Inline-grid: Generating an intranet grid
Subgrid: If your grid capacity is itself a grid item (that is, nested meshes), you can use this property to indicate that you want to inherit his parent's Row/column instead of his own.
. container{ Display:grid | inline-grid | subgrid}
Grid-template-columns, Grid-template-rows
Use a space-delimited list of values to define the columns and rows of the grid. These values represent the track size, and the space between them represents the grid line values:
: Can be the length, percentage, or fraction of free space in the grid
: The name of the line for example, when you flow out of a blank area between mesh tracks, the gridlines automatically assign a numeric name
. container{ Display:grid; grid-template-columns:40px 50px Auto 50px; grid-template-rows:25% 100px Auto;}
But you can choose to explicitly name the row, note the parentheses syntax for the row name
. container{ Grid-template-columns: [First] 40px [line2] 50px [line2] auto [line3] auto [Col4-start] 50px [five] 5px;
grid-template-rows: [Row1-start] 25% [row1-end] 100px [thrid-line] auto [last-line];}
Note that a row/column can have multiple names, for example, the second column here will have two names
. contaienr{ grid-template-rows: [Row1-start] 25% [row1-end row2-start] 25% [Row2-end]}
If your definition contains duplicate parts, you can use the repeat () notation to simplify
. container{ Grid-template-columns:repeat (3, 20px [Col-start]) 5%;}
Equivalent to this
. container{ grid-template-columns:20px [Col-start] 20px [Col-start] 20px [Col-start] 5%;}
Setting the unit to fr
grid allows you to set the grid track size to a fraction of the free space of the grid container, for example, which sets each item to One-third of the container's width
. container { grid-template-columns:1fr 1fr 1fr;}
The free space is calculated after any non-elastic items, in this case, the fr
total amount of free space in the unit does not include 50px
. container{ grid-template-columns:1fr 50px 1fr 1fr;
Grid-template-areas
grid-area
define a mesh template by applying a property to specify the name of the grid space. Value:
: The name of the specified grid spacegrid-area
: Represents an empty grid cell
None: No grid space defined
. container{ grid-template-areas: "<grid-area-name> |. | none | ...";}
Example
. container{ Display:grid; Grid-template-columns:repeat (4, 50px); Grid-template-rows:auto; Grid-template-areas: "Header Header Header header " "main main. Slidebar" "Footer footer footer Footer"}. item-a{ Grid-area:header;}. item-b{ Grid-area:main;}. item-c{ Grid-area:slidebar;}. item-d{ Grid-area:footer;}
Note: You are not using this syntax to name the line is just space, when you use this syntax, the space at the end of the line is actually automatically named, if your grid space name is Foo, then the first row of the space and the starting column name is Foo-start, the last column and the last row is foo-end;
Grid-template
A brief setup grid-template-rows
, grid-template-columns
and a grid-template-areas
statement together
. container { Grid-template:none | subgrid | <grid-template-rows> <grid-area-name>/< Grid-template-columns>;}
Because the grid-template
implicit grid properties ( grid-auto-columns
, grid-auto-rows
,) are not reset, grid-auto-flow
this is probably what you want to do in most cases, so it is recommended that you use a grid
generic instead grid-template
.
Grid-column-gap Grid-row-gap
Specify the size value of the grid line:
: Length Value
. container{ grid-column-gap: <line-size>; Grid-row-gap: <line-size>;}
. container{ Display:grid; Grid-template-columns:repeat (4, 50px); Grid-template-rows:repeat (4, 80px); grid-column-gap:10px; grid-row-gap:15px;}
Grid-gap
A shorthand grid-row-gap
and a grid-column-gap
value:
: Length Value
. container { grid-gap: <grid-row-gap><grid-column-gap>}
Justify-items
Aligns the contents of the grid along the row axis (rather than align-items
along the column axis), and applies to the values of the grid items within all the grid containers:
Start: Aligns content to the left side of the grid area
End: Aligns content to the right end of the grid area
Center: Aligns the contents of the grid Area Center
Stretch: Fills the entire width of the grid area
. container{ Justify-items:start | end | center | stretch}
Example
. container{ Justify-items:start;}
. container{ Justify-items:end;}
. container{ Justify-items:center;}
. container{ Justify-items:stretch;}
This behavior can also be justify-self
set on individual grid items by setting the
Align-items
Aligns the contents of the grid along the column axis (instead justify-items
of aligning along the row axis). This value applies to all grid item values within the container:
Start: Aligns content to the top of the grid space
End: Aligns content to the bottom of the grid space
Center: Aligns content to the centre of the grid space
Stretch: Fills the entire height of the grid space
. container { Align-items:start | end | center | Stretch;}
Example
. container { Align-items:start;}
. container { align-items:end;}
. container { align-items:center;}
. container { align-items:stretch;}
This behavior can also be done byalign-self
Properties are set on individual grid items
Justify-content
Sometimes, the total size of the grid may be less than the size of its grid container, which can happen if all of your grid items are resized in a non-flexible unit. This allows you to set the alignment of the grid within the grid container, which aligns the network values along the row axis:
Start: Aligns the grid to the left side of the grid container
End: Aligns the grid to the right end of the grid container
Center: Aligns the grid to the centre of the grid container
Stretch: Resizes the grid to allow the grid to fill the entire width of the grid container
Space-around: Allocate a uniform space between each grid project and allocate half of the space at two ends
Space-between: Allocate a uniform space between each grid item, no space allocated on two sides
Space-evenly: Allocate a uniform space between each grid project, including two remote examples
. container{ Justify-content:start;}
. container{ Justify-content:end;}
. container{ Justify-content:center;}
. container{ Justify-content:stretch}
. container{ Justify-content:space-around;}
. container{ Justify-content:space-between;}
. container{ Justify-content:space-evenly;}
Align-content
This property justify-content
is just like aligning the grid values along the column axis:
Start: Aligns the grid to the top of the grid container
End: Aligns the grid to the bottom of the grid container
Cneter: Aligns the grid to the center of the grid container
Stretch: Resize grid items to allow grid items to fill the entire height of the grid container
Space-around: Distributes a uniform space between each grid item, allocating half the space at both ends
Sapce-between: Allocates a uniform space between each grid item, with no space at both ends
Space-evenly: Allocate a uniform space between each project, including examples at both ends:
. container{ Align-content:start;}
. container{ Align-content:end}
. container{ Align-content:center;}
. container{ Align-content:stretch;}
. container{ Align-content:space-around;}
. container{ Align-content:space-between;}
. container{ Align-content:space-evenly;}
Grid-auto-columns grid-auto-rows
Specifies the size of any automatically generated mesh track that creates an implicit grid track value when you explicitly declare a row or column (through Grid-template-rows/grid-template-columns) time that exceeds the defined grid space:
: Can be length, percent, or fraction (using fr
units) How to create an implicit grid track, example:
. contaienr{ Display:grid; Grid-template-columns:repeat (2, 60px); Grid-template-rows:repeat (2, 90px);}
This creates a grid of 2 X 2
But now if you use grid-column
and grid-row
locate your grid project like this
. item-a { grid-column:1/2; Grid-row:2/3;}. item-b { Grid-column:5/6; Grid-row:2/3;}
We tell item-b
from line 5th to the end of line 6th, but we don't define line 5th or 6th, because we reference a non-existent row, so we create an implicit track with a width of 0 to fill the blanks, and we can use grid-auto-columns
and grid-auto-rows
to specify the width of these implicit tracks
. container{ grid-auto-columns:60px;}
Grid-auto-flow
If you don't explicitly place grid items on the grid, the auto-assign algorithm automatically assigns those items. This property controls the principle value of the auto-allocation algorithm:
Column: Tells the auto-assign algorithm to populate each row in turn, adding new rows as needed
Row: Tells the auto-assign algorithm to populate each column at once, adding new columns as needed
Dense: Tells the auto-assign algorithm to try to fill the space early in the grid if smaller items appear later
dense may cause your project to appear in a disorderly order example:
<section class= "Container" > <p class= "item-a" >item-a</p> <p class= "Item-b" >item-b </p> <p class= "item-c" >item-c</p> <p class= "item-d" >item-d</p> <p class= "Item-e" >item-e</p></section>
You define a grid of five rows of two columns and set it grid-auto-flow
torow
. container{ Display:grid; Grid-template-columns:repeat (5, 60px); Grid-template-rows:repeat (2, 30px); Grid-auto-flow:row;}
Assign a project to a grid container and allocate space for only two of these items
. item-a { grid-column:1; Grid-row:1/3;}. item-e { grid-column:5; Grid-row:1/3;}
If it is grid-auto-flow
set tocolumn
Grid
Shorthand for all the single declarations that set the following properties:,,, grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
, grid-auto-columns
and grid-flow
.
Properties of grid items
Grid-column-start, Grid-column-end, Grid-row-start,grid-row-end
Determines the position of an item within a grid by referencing a specific grid line. Value:
: Can be a number to reference a numbered gridline, or a name to refer to a named grid line
Span: Project will span the number of grid tracks provided
Span: The project will span until the name that is supplied with it hits
Auto: Automatically assign
. item-a { grid-column-start:2; grid-column-end:five; Grid-row-start:row1-start Grid-row-end:3}
. item-b { grid-column-start:1; Grid-column-end:span Col4-start; Grid-row-start:2 Grid-row-end:span 2}
If there is no grid-column-end
/ grid-row-end
declaration, the project will default across one project, the project can overlap each other, you can use z-index
to control the stacking order
Grid-column, Grid-row
Abbreviated to grid-column-start
+ grid-column-end
and grid-row-start
+ grid-row-end
values:
. item-c { Grid-column:3/span 2; GRID-ROW:THIRD-LINE/4;}
Grid-area
Provide a name for the project so that it can be referenced by using a grid-template-areas
template created by the property. Or a property can be used as a + + + grid-row-start
grid-column-start
grid-row-end
grid-column-end
value:
: The name you choose
///: Can be a number or a named row
. Item { Grid-area: <name> | <row-start>/<column-start>/<row-end>/<column-end A.;}
Example: A way to assign a name as a project
. item-d{ Grid-area:header;}
As a shorthand for + + + grid-row-start
grid-column-start
grid-row-end
grid-column-end
:
. item-d { grid-area:1/COL4-START/LAST-LINE/6}
Justify-self
Aligns the contents of the grid along the row axis, and this property applies to the content values of a single grid item:
Start: Aligns content to the left side of the grid space
End: Aligns content to the right end of the grid space
Center: Aligns the contents of the center of the grid space
Stretch: Fills the entire width of the grid space
. item { Justify-self:start | end | center | Stretch;}
Example:
. item-a { Justify-self:start;}
. item-a { justify-self:end;}
. item-a { justify-self:center;}
. item-a { justify-self:stretch;}
align-self
Aligns the contents of the grid along the column axis, and this value applies to content values within a single grid item
Start: Aligns content to the top of the grid space
End: Aligns content to the bottom of the grid space
Center: Aligns the contents of the center of the grid space
Stretch: Fills the entire height of the grid space
. item { Align-self:start | end | center | Stretch;}
Example:
. item-a { Align-self:start;}
. item-a { align-self:end;}
. item-a { align-self:center;}
. item-a { align-self:stretch;}
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
Achieve card 3D rollover effect
How to use CSS settings to record user passwords