CSS Gird Layout Example tutorial sharing

This article mainly introduced the CSS Gird Layout Tutorial Guide's related material, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

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:

1. Gird: Generating block-level grids

2. Inline-grid: Generating an intranet grid

3. 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-areadefine a mesh template by applying a property to specify the name of the grid space. Value:

1. : The name of the specified grid spacegrid-area

2. : Represents an empty grid cell

3. 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:

1. Start: Aligns content to the left side of the grid area

2. End: Aligns content to the right end of the grid area

3. Center: Aligns the contents of the grid Area Center

4. 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:

1. Start: Aligns content to the top of the grid space

2. End: Aligns content to the bottom of the grid space

3. Center: Aligns content to the centre of the grid space

4. 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:

1. Start: Aligns the grid to the left side of the grid container

2. End: Aligns the grid to the right end of the grid container

3. Center: Aligns the grid to the centre of the grid container

4. Stretch: Resizes the grid to allow the grid to fill the entire width of the grid container

5. Space-around: Allocate a uniform space between each grid project and allocate half of the space at two ends

6. Space-between: Allocate a uniform space between each grid item, no space allocated on two sides

7. 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:

1. Start: Aligns the grid to the top of the grid container

2. End: Aligns the grid to the bottom of the grid container

3. Cneter: Aligns the grid to the center of the grid container

4. Stretch: Resize grid items to allow grid items to fill the entire height of the grid container

5. Space-around: Distributes a uniform space between each grid item, allocating half the space at both ends

6. Sapce-between: Allocates a uniform space between each grid item, with no space at both ends

7. 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:

1. Column: Tells the auto-assign algorithm to populate each row in turn, adding new rows as needed

2. Row: Tells the auto-assign algorithm to populate each column at once, adding new columns as needed

3. Dense: Tells the auto-assign algorithm to try to fill the space early in the grid if smaller items appear later

4. 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:

1. : Can be a number to reference a numbered gridline, or a name to refer to a named grid line

2. Span: Project will span the number of grid tracks provided

3. Span: The project will span until the name that is supplied with it hits

4. 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:

1. : The name you choose

2. ///: 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:

1. Start: Aligns content to the left side of the grid space

2. End: Aligns content to the right end of the grid space

3. Center: Aligns the contents of the center of the grid space

4. 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;}