Unpopular Grid layout

CSS Grid Grid layout

Grid layout is two-dimensional, Flex layout is linear compatibility grid(95%), almost all flex (99.18%) layout.

The Grid concept

The name of the interpretation

• Container:display: gridCorresponding node region
• Grid lines: Lines used to divide containers. It is divided into horizontal grid lines and vertical grid lines
• Row and column: Horizontal dividing lines split the container into rows (n rows require N +1 horizontal dividing lines); Vertical grid lines divide the container into columns
• Cell: Rows and columns intersect to form a cell
• Item: A grid-oriented child element within a container, which can only be a top-level element, called an item.

Container attribute

The build container is set up primarily with seven properties.

• Grid-template-columns /grid-template-rows sets the properties of the column/row contents
• Grid-gap sets the column/row spacing property
• Grid-template-areas sets the attributes of the cell areas
• Grid-auto-flow sets cell orientation properties
• Place-items Sets the property of where content is arranged in a cell
• Place-content Sets the property for the location of the entire content area in the container
• Grid-auto-columns /grid-auto-rows sets cell properties that are out of the original grid

A common layout is the grid

1, vertical horizontal center

This layout is a common one, using the display:grid layout:In the figure, the red block is always in the center of the gray block vertically and horizontally, and the corresponding code is as follows:

  display: grid;
  place-items: center; 
Copy the code

Using the code above for the parent element, you can achieve the effect shown in the diagram. The complete format is place-items:

< context-items >;

2. Adaptive layout

Adaptive layouts are also commonly used, especially on mobile terminals, where different widths of screens can be adapted to different layouts without causing style confusion, as shown in the following figure:When the width changes, the three color blocks in the figure will be corresponding to one line, two lines, three lines, to achieve the self-adaptive effect, the parent setting code is as follows:

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
Copy the code

Child elements just set flex: 1 1 150px; Can achieve the above effect. The three values are: can the project expand if there is extra space? Specifies whether the project can shrink the initial width if the width is insufficient.

3. Sidebar layout

The sidebar layout is widely used on the PC management side. Most management sides use the sidebar. The adaptive sidebar is shown in the figure below:As shown in the figure, the sidebar on the left is fixed when the viewable area is small to a certain range. When the viewable area becomes large, it will also become slightly larger to adapt to browsers of different screen sizes. The properties are set on the parent container, and the code is as follows:

    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
Copy the code

Split the layout into two columns, with the width of the left side of the layout ranging from 150px to 25% of the full width, and the remaining right side of the layout completely filled.

4. Fixed layout of header and footer

Fixed header footer layouts are common on both the management and mobile ends, as shown in the following figure:The header and bottom of this layout are fixed, and the middle content area is adaptive height. The code is as follows:

    display: grid;
    grid-template-rows: auto 1fr auto;
Copy the code

The code is meant to be laid out in three lines, with the first and third lines fixed and the rest filled in the middle.

5. Grail layout

The Holy Grail layout is the bottom of the head, the left and right sidebar are fixed, and then the middle area adaptively expands, as shown below:The code for the Grail layout is as follows:

    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
Copy the code

It means that the upper and lower rows are divided into three, the left and right columns are divided into three, the upper and lower rows are fixed height, the middle row is self-adaptive, the left and right columns are fixed, the middle column is self-adaptive.

Grid will support the height demo test

The < body > < div class = "head" > < / div > < div class = "contain" > < div class = "lf" > < / div > < div class = "center" > < / p > < p > waste people People < / p > < p > waste people < / p > < p > waste < / div > < div class = "rf" > < / div > < / div > < div class = "food" > < / div > < / body >Copy the code

    html,
    body {
      height: 100%;
      width: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .head,
    .food {
      width: 100%;
      height: 60px;
      background-color: rosybrown;
    }
    .contain {
      flex: 1;
      width: 100%;
      overflow: scroll;
      display: grid;
      grid-template: auto 1fr auto / auto 1fr auto;
    }
    .lf,
    .rf {
      width: 50px;
      background-color: salmon;
    }
Copy the code

Flex layout

CSS Grid Grid layout

The grid layout

grid learn

Juejin. Cn/post / 684490…