The introduction of

Web layout has always been an important issue for Web developers. But in fact, for a long time in web development, we didn’t even have a complete layout module. In general, Web layout goes through the following four stages:

1, table table layout, through Dreamweaver drag table or handwritten table label layout

2, float float and position positioning layout, with the help of the element box model itself and float position properties, etc

3, Flex elastic box model layout, revolutionary breakthrough, solve the three pain points on the traditional layout of the arrangement direction, alignment, adaptive size. Is the most mature and powerful layout scheme

4, Grid layout, two-dimensional layout module, with strong content size and positioning ability, suitable for the need to align content in two dimensions of the layout

What is grid layout

Grid layout is a new CSS layout model, which is good at dividing a page into several major areas, and defining the size, location, hierarchy and other relations of these areas. Claimed to be the most powerful CSS layout scheme, is currently the only CSS two-dimensional layout. With the Grid layout, you can easily implement a layout like the one below to demonstrate the address

Grid layout and Flex layout

When it comes to layouts, flex layouts come to mind, and some people think flex layouts exist at all. It seems unnecessary to know about Grid layouts. But there is a substantial difference between a Flex layout and a Grid layout, which is that a Flex layout is one-dimensional and a Grid layout is two-dimensional. Flex layouts can only handle the layout of elements on one dimension at a time, one row or one column. Grid layout is the division of the container into “rows” and “columns,” resulting in a Grid where we can place Grid elements in relation to the rows and columns for our layout purposes.

So Grid is better for macro page architecture, while Flex is better at local column layout.

Example Flex layout:

Example Grid layout:

Grid Layout Compatibility

Finally, let’s talk about Grid layout compatibility. In Caniuse, we can see the following results. The overall compatibility is good, but it is not supported under IE 10. Personal advice is fine to use in the company’s internal systems, but TOC may not be appropriate right now

Some basic concepts of the Grid

Grid layout is a two-dimensional layout structure, which is formed by two groups of intersecting grid lines. Web designers can use these structured structures of rows and columns to lay out design elements. When defining a grid layout structure, we need to describe the main frame structure to be laid out on the parent container. To describe this framework structure, we need to name its basic constituent elements. The components of a grid layout can be summarized as the following concepts:

  • The row line: line line
  • The column line: column line
  • Track: Grid track, i.e. the area formed between lines or lines, for placing child elements
  • Gap: Unusable area of grid space, line to line, or line to line, used to separate elements
  • Cell: an area separated by rows and columns for placing child elements in a grid cell
  • Area: grid area, consisting of one or more grid cells, used to place child elements!

Keeping these concepts in mind is the foundation for mastering and applying grid layouts.

Container Properties

While grid layout has many benefits, it is not easy to learn because there are so many attributes to set the layout, including 17 that apply to the parent container alone, plus 10 that apply to child elements, and different ways to value those attributes. That’s a lot of weight to put on your memory. So how do you digest so many attributes and uses in such a short time? Suggestions can be combined with demo, while knocking code while understanding, use some free time to remember. Grid layout attributes can be divided into two categories: container attributes and project attributes. Let’s look at container properties first

Enabling grid containers

We use the display property to define a grid container whose grid value determines whether the container is rendered block-level or inline. Once the grid container is enabled, all of its child elements go into the Grid document flow, called grid child items.

display: grid | inline-grid | subgrid
Copy the code
  • grid: Defines a block-level grid container
  • inline-grid: Defines an inline grid container
  • subgrid: Defines a grid container that inherits the size of the rows and columns of its parent, which is a child of the parent.

Note: Column, float, clear, and vertical-align have no effect on grid containers.

.wrapper { 
    display: grid; 
}
.wrapper-1 { 
    display: inline-grid; 
}
.test1, test2{
    display: inline-block; 
}
Copy the code

Grid-template-columns and grid-template-rows attributes

Lexical:

grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;Copy the code
  • <track-size>: Defines the width and height of a grid cell. The unit can be a length (e.g. Px, EM, REM, vw, vh) or percentage, or the number of units of free space in the grid (in fr).
  • <line-name>: Defines the name of the gridline. It is not a required value. Can be any name you choose, its name is represented by a number when no Settings are displayed.

Example:

When you leave a space between the track values, the grid lines are automatically named with numbers:

.wrapper{   
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
Copy the code

Of course, we can also give the grid line a name:

.wrapper{   
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];   
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];  
}
Copy the code

\

Note: Grid lines must be named with brackets.Copy the code

A grid line can also have multiple names, separated by Spaces and enclosed by brackets:

.wrapper{   
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  
}
Copy the code

Repeat () function

You can simplify repeating values. The function takes two arguments, the first being the number of repetitions and the second being the value to be repeated. For example, the top row height is the same, we can do this, the actual effect is exactly the same;

.wrapper{/* 2 rows with row height 50px */ grid-template-rows: repeat(2, 50px); }Copy the code

Auto – the fill keywords

Represents an autofill that allows as many cells in a row (or column) as possible. Grid-template-columns: repeat(auto-fill, 200px) indicates that the column width is 200px, but the number of columns is not fixed. As long as the browser can fit, you can place the elements, code and effect as follows:

.wrapper{ 
    grid-template-columns: repeat(auto-fill, 200px);
}
Copy the code

Fr keyword

The Grid layout also introduces an additional unit of length to help create flexible Grid tracks. The FR unit represents an equal portion of the available space in the grid container. Grid-template-columns: 200px 1fr 2fr Indicates that the width of the first column is 200px, and the remaining width is 1/3 and 2/3 of the remaining width respectively. The code and effects are shown below:

.wrapper{ 
    grid-template-columns: 200px 1fr 2fr;
}
Copy the code

Minmax () function

We sometimes want to give grid elements a minimum and maximum size. The minmax() function generates a length range within which the length can be applied to grid projects. It takes two parameters, a minimum and a maximum. Grid-template-columns: 1fr 1fr minmax(300px, 2fr) specifies that the width of the third column must be at least 300px but not more than twice the width of the first and second columns. The code and effects are as follows:

.wrapper{ 
    grid-template-columns: 1fr 1fr minmax(300px, 2fr);
}
Copy the code

The auto keyword

The length is determined by the browser. With the auto keyword, we can easily achieve a three – or two-column layout. Grid-template-columns: 100px auto 100px grid-template-columns: 100px auto 100px

.wrapper{ 
    grid-template-columns: 100px auto 100px;
}
Copy the code

Grid-row-gap, grid-column-gap, and grid-gap attributes

Specifies the size of a grid line, or the spacing between grid items.

Lexical:

grid-column-gap: <line-size>

grid-row-gap: <line-size>
Copy the code
  • <line-size>: the length value

Grid-gap is short for grid-column-gap and grid-row-gap:

grid-gap: <grid-column-gap> <grid-row-gap>
Copy the code

If there is only one value, grid-row-gap will have the same value as grid-column-gap.

Example:

.container{   

  display:grid;   

  grid-template-columns: 100px 50px 100px;   

  grid-template-rows: 80px auto 80px;    

  grid-column-gap: 10px;   

  grid-row-gap: 15px;  

}
Copy the code

Note: Spacing only works between grid items, not at container edges.

The grid – the template – areas attribute

Grid-template-areas can be used with grid-Areas to define an explicit grid area. Grid-template-areas define grid areas, and then use grid-area to call the declared grid area name to place the corresponding grid project.

Lexical:

grid-template-areas: "<grid-area-name> | . | none | ..." "..." 
Copy the code
  • <grid-area-name>In:grid-areaThe name of the grid region specified in
  • .: A period represents an empty grid cell
  • none: No grid region is defined

Example:

<div class="container">   
  <div class="item-a"></div>   
  <div class="item-b"></div>   
  <div class="item-c"></div>   
  <div class="item-d"></div>   
</div>
Copy the code

Set CSS styles:

.item-a{   
  grid-area: header;  
}  

.item-b{   
  grid-area: main; 
}  

.item-c{   
  grid-area: sidebar; 
}  

.item-d{   
  grid-area: footer; 
}  

.container{    
  width: 300px;
  height:200px;   
  display:grid;   
  grid-template-columns: 1fr 1fr 1fr 1fr;   
  grid-template-rows: auto;   
  grid-template-areas: "header header header header"   
                       "main main . sidebar"   
                       "header footer header footer";  
}
Copy the code

In the code above, we will create a 4 by 3 grid container, with the first line consisting of the header area, the middle line consisting of two main areas and an empty cell and a sidebar area, and the last line consisting of the footer area.

Property-items, align-items property

justify-items

Aligns the contents of grid items with the column axis (align-items are aligned with the row axis, in contrast). This value is useful for all grid items in the container.

justify-items: start | end | center | stretch
Copy the code
  • startAlign content to the left of the grid area
  • endAlign content to the right of the grid area
  • center: Middle alignment of content and grid area
  • stretch: Width to fill the entire grid area (default)

align-items

Aligns the contents of grid subitems with the row axis. This value is useful for all grid subitems in the container.

align-items: start | end | center | stretch;
Copy the code
  • startAlign the content with the top of the grid area
  • end: Align the content with the bottom of the grid area
  • center: Middle alignment of content and grid area
  • stretch: Height to fill the entire grid area (default)

Context-content, align-content

justify-content

If defined in inelastic units like PX, the total grid area size may be smaller than the grid container, so you can set the grid alignment (aligned perpendicular to the grid line).

justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
Copy the code
  • startAlignment: left
  • end: the right alignment,
  • center: Center and align
  • stretch: Fills the grid container
  • space-around: Place an equal amount of space in the middle of each grid item, half the size at the beginning and end
  • space-between: Align both sides, place equal space in the middle of each grid sub-item, with no space at the beginning and end
  • space-evenly: Grid spacing is equal, including beginning and end

align-content

If defined in inelastic units like PX, the total grid area size may be smaller than the grid container, and you can set the grid alignment (aligned perpendicular to the grid line).

align-content: start | end | center | stretch | space-around | space-between | space-evenly 
Copy the code
  • start: Top aligned
  • end: Bottom aligned
  • center: Center and align
  • stretch: Fills the grid container
  • space-around: Place an equal amount of space in the middle of each grid item, half the size at the beginning and end
  • space-between: Align up and down, place equal space in the middle of each grid subitem, with no space at the beginning and end
  • space-evenly: Place equal space in the middle of each grid item, including the beginning and end

Grid-auto-columns and grid-auto-rows properties

Automatically generates implicit grid tracks (columns and rows) that are automatically created when you locate grid items outside of the grid container range.

grid-auto-columns: <track-size>

grid-auto-rows: <track-size>
Copy the code
  • <track-size>: can be a length, percentage or the number of shares of free space in a grid (by using FR units)

To illustrate how implicit grid traces can be created, consider this:

.container{   
  grid-template-columns: 60px 60px;   
  grid-template-rows: 90px 90px  
}
Copy the code

In the code above, we created a 2 x 2 grid.

But now imagine you use grid-column and grid-Row (project properties below) to position your grid subitems like this:

.item-a{   
  grid-column: 1 / 2;   
  grid-row: 2 / 3;  
}  

.item-b{   
  grid-column: 5 / 6;   
  grid-row: 2 / 3;  
}
Copy the code

We’re telling item-B to start on column 5 and end on column 6, but we haven’t defined column 5 or column 6 yet. Because the lines we referenced do not exist, implicit grid traces of 0 widths will be created to fill these gaps. We can use grid-auto-columns and grid-auto-rows to specify the width of these implicit grid tracks:

.container{   
  grid-auto-columns: 60px;  
}
Copy the code

The grid – auto – flow properties

The grid-auto-flow property controls how the automatic layout algorithm works, specifying exactly how the elements that are automatically laid out in the grid are arranged. The default placement order is “first after column”, that is, the first row is filled, and then the second row is placed. . The order is determined by the grid-auto-flow property, which defaults to row.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
Copy the code

Careful students may have found a problem, that is, there is a blank between the fifth item and the sixth item (as shown in the picture below), which is caused by the fact that the length of the sixth block is larger than the length of the blank and is squeezed into the next line. In a practical application, we might want to fill this gap with the following length. In this case, we can set Grid-Auto-flow: Row dense, which means to fill the table as much as possible. The code and effects look like this:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
Copy the code

Grid-auto-flow: column can be set, indicating that the column is first followed by the line. The code and effect are shown below:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
Copy the code

Project Attribute Introduction

grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

Grid lines define the position of grid items. Grid-column-start and grid-row-start define the start position of the grid item, grid-column-end and grid-row-end define the end position of the grid item.

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; 
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ; 
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
Copy the code
  • <number> | <name>: can be a number for a grid line marked with a number, or a grid line named for a grid line
  • span <number>: subitems span the grid trace of the specified number
  • span <name>: subitems will span the grid line before the specified name
  • auto: Automatic layout, automatically across or default across one.

Example:

.item-a{   
  grid-column-start: 2;   
  grid-column-end: five;   
  grid-row-start: row1-start   
  grid-row-end: 3  
}
Copy the code

.item-b{   
  grid-column-start: 1;   
  grid-column-end: span col4-start;   
  grid-row-start: 2   
  grid-row-end: span 2  
}
Copy the code

Grid-column is short for grid-column-start and grid-column-end; Grid-row is short for grid-row-start and grid-row-end.

grid-column: <start-line> / <end-line> | <start-line> / span <value>;   
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
Copy the code

Example:

.item-c{   
  grid-column: 3 / span 2;   
  grid-row: third-line / 4;  
}
Copy the code

The grid – area property

Give the grid subitem a name to be referenced by the template created by the grid-template-Areas attribute. This property can also be used more briefly to represent grid-row-start+ grid-column-start + grid-row-end+ grid-column-end.

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
Copy the code
  • <name>: Selected name
  • <row-start> / <column-start> / <row-end> / <column-end>– Can be the number or name of the grid line

Example:

As a way of assigning a name to a grid subitem:

.item{  

.item-d{   
  grid-area: header  
}
Copy the code

Grid-row-start + grid-column-start + grid-row-end+ grid-column-end

.item-d{   
  grid-area: 1 / col4-start / last-line / 6  
}
Copy the code

Property-self, align-self

(1) the justify – self

Aligns the contents of grid subitems with the column axis (as opposed to align-self, which aligns with the row axis). This value can be applied to the contents of individual grid subitems.

justify-self: start | end | center | stretch
Copy the code
  • start – Align the content left in the grid area
  • end– Align the content right in the grid area
  • centerAlign the content in the middle of the grid area
  • stretch— Padding the width of a network area (default)

\

(2) the align – self

Allows the contents of grid subitems to be aligned on the row axis (as opposed to justify-self), which can be applied to the contents of individual grid subitems.

align-self: start | end | center | stretch
Copy the code
  • startAlign the content on the grid area
  • end Align the content under the grid area
  • centerAlign the content in the middle of the grid area
  • stretch— Fill the height of a network area (default)

Remember to summarize

After all of a sudden combing so many attributes, there may be few to remember. Let’s make a simple summary from the perspective of functions, which is more conducive to memory

The parent container

Set the framework

  • display: grid;
  • grid-template-columns/grid-template-rows/grid-template
  • grid-template-areas

Set interval

  • grid-column-gap/grid-row-gap/grid-gap

Looking for alignment

  • justify-items/align-items
  • justify-content/align-content

subprojects

Pendulum position

  • grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

Looking for alignment

  • justify-self/align-self

The values

The size of the

  • The unit can be a length (e.g. Px, em, REM, vw, vh) or percentage, also introducedfrThe fraction ratio of the remaining space in the container;
  • min-contentAs the name implies, the minimum width set according to the content of the element. In English sentences, it is usually the length of the longest word, while in Chinese, it is the length of a word.
  • withmin-contentCorresponding,max-contentThe size is set to the maximum width that the content size can reach.

function

  • minmaxFor adaptive grid regions, set a minimum and maximum value
  • repeatFunction, which is used to set the spacing of frames in batches. This function takes two parameters, the first parameter controls the number of cycles and the second parameter controls the spacing
  • fit-contentIt’s actuallymin(maximum size, max(minimum size, argument))Short for shrink element width to content width.

named

The naming order is the same as the writing order: number from left to right and top to bottom. Assuming we specify a grid layout structure of 3×3, including border lines produces 4+4=8 lines.

alignment

The keywords used for alignment in grid layouts are start, Center, end, and stretch (default).

Grid practice – Responsive layout

Code demo address

Fr implements equal response

Fr Bisector unit that divides the available space of a container into as many bisector Spaces as you want. With this property, we can easily implement an equally divided response. Grid-template-columns: 1fr 1FR indicates that containers are divided into three equal columns

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
Copy the code

Repeat + auto-fit — Fix column width and change the number of columns

Equally distributed layouts are not unique to Grid layouts. Layouts like Flex can also be easily implemented. Let’s look at more advanced responsive layouts

The examples above are always three columns, but requirements often want our grid to have a fixed column width and vary the number of columns depending on the width of the container. At this point, we can use the repeat() function and the auto-fit keyword mentioned above. Grid-template-columns: repeat(auto-fit, 200px) indicates that the fixed column width is 200px and the number of columns is adaptive. As long as the number of columns can be accommodated, the columns will be arranged upward. The code and effect are as follows:

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
Copy the code

Repeat +auto-fit+minmax remove the space on the right

In the effect seen above, the right side is usually left blank, which is undesirable. It would be nice if the width of the column could also be adaptive within a certain range. The minmax() function helps us do this. Grid-template-columns: repeat(auto-fit, 200px); grid-template-columns: repeat(auto-fit, 200px); Repeat (auto-fit, minmax(200px, 1FR)) indicates that the column width is at least 200px and is divided equally if there is any space. The code and effects look like this:

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
Copy the code

The Grid layout is the most powerful CSS layout

Learn grid layout from scratch

Grid Layout

CSS Grid Grid layout overview

Two schemes, Flexbox and Grid, implement multi-row and multi-column layouts