preface

So far, I have written three articles in the CSS Layout series. The first three articles focus on basic concepts of CSS layouts, basic CSS layouts, and Flex layouts. This article, the final in the series, focuses on Grid layouts and multi-column layouts. The road above:

  • CSS Layout (1)
  • CSS Layout (2)
  • CSS Layout (3)

In this article, we’ll start by talking about the differences between Flex layouts and Grid layouts, then discuss the concepts and properties of Grid layouts in detail, and finally discuss the layout of newspapers and periodicals on the Web, the multi-column layout.

Flex VS Grid

In the last article, I summarized flexbox, and I concluded that Flexbox defines a layout that adjusts the display size of child elements, providing great flexibility for one-dimensional layouts. Although you can set the flex-wrap property to arrange multiple lines, it is not used for two-dimensional layout itself and is not very easy to use. Correspondingly, Grid layout model is a system based on two-dimensional Grid layout. So the question is, what is a one-dimensional layout and what is a two-dimensional layout? Let’s make a comparison:

One dimensional layout

A one-dimensional layout can always be laid out in only one direction of the coordinate system. In flexbox, for example, children can only be laid out in one direction, and the direction of the layout is controlled by flex-direction.

  • Set flex-direction to row, and flexbox’s children are laid out from left to right along the X-axis. The layout is shown in the figure below:

  • Flex-direction is set to column, and flexbox’s children are laid out from the top down along the Y-axis. Its layout is shown in the figure below:

The two-dimensional layout

For a two-dimensional layout, there is no main axis and side axis, and the arrangement of child elements is not arranged along a certain coordinate axis. Grid layout is a typical two-dimensional layout model. In the Grid model, you can think of the parent elements as a Grid, and then the child elements fill the Grid.In this layout, there is no main axis or side axis. The x axis and y axis are equal, and they form a grid together.Therefore, this layout is called a Grid layout.

One of the benefits of this layout is that a single GIRd container can hold all kinds of weird child element size combinations. If you use the Flexbox model, as shown in the figure, you need to partition flex and have a Flex container inside the flex container, which is cumbersome. However, if you use a Grid layout, you just need a Grid container and write the sorting rules.

It is important to note that there is no difference between the Flex layout and the Grid layout, but they are used in different situations. Therefore, a good idea is to combine the Flex layout with the Gird layout, and use each separately where appropriate. This will help us achieve a better layout.

Basic Concepts of Grid

In this section, we’ll look at some of the basic concepts of the Grid layout model, which are divided into the following groups:

  • Grid Container/Grid Item
  • Grid Lines/Grid Tracks
  • Grid Cell
  • Grid area/merge cells

Let’s take a look at how these concepts come into being. As with Flexbox, to trigger the Grid layout, you need to declare the diplay property of the parent element as grid. This declaration leads to two basic concepts of the Grid:Grid Containers and Grid-Items.As the name implies, these two concepts also refer to the container that holds the arrangement and the child elements that are arranged in the container.

After the Grid layout is triggered, the next thing to consider is the rules for this layout model. As mentioned earlier, the Grid layout is a two-dimensional layout with no main and side axes, and the X and y axes are equal. So what happens is that the child elements are not just arranged on any axis, butDistributed in a grid consisting of the x and y axes.

As you can see, these imaginary lines parallel to the axes are calledGrid line. Grid lines are lines that divide the area of a grid layout horizontally and vertically. Both horizontally and vertically, the grid lines start at the top left corner of the container, at the origin of the coordinates. And then to the right and down. The area between any two grid lines is calledGrid Tracks. Each of the four grid lines isGrid CellA grid cell is the basic unit of a Grid layout. Each Grid item is filled into a grid cell.

This is the basic idea of grid layout. The grid container is abstracted into small cells divided by lines parallel to the axes, and then the child elements are filled into each cell.

The last two concepts of grid are merging cells and grid regions. To merge cells is to combine several grid cells into one, so that the cells come together to form oneGrid Area. A division of the grid region is shown in the figure below:

The Grid properties

Like flexbox, the properties of the Gridbox include properties that apply to the Grid container and properties that apply to grid projects. However, the exact content of these properties can be very different due to the different arrangement rules of the Flexbox and gridbox. In the Flexbox layout model, the arrangement of child elements depends on the orientation of the main axis, so these attributes fall into three categories: orientation, size, and alignment. In the Gridbox layout model, the arrangement of child elements is related to the division of the grid, so these attributes are divided into three categories: grid division, size, and alignment.

Grid Container

As mentioned earlier, the properties applied to the grid container can be used to control the division, sizing, and alignment of the grid.

  • Meshing:
    • grid-template -> grid-template-columns || grid-template-rows || grid-template-areas
    • grid -> grid-template-rows || grid-template-rows || grid-template-areas || grid-auto-rows || grid-auto-columns || grid-auto-flow
  • Alignment:
    • place-content -> align-content || justify-content
    • place-item -> align-items || justify-items
  • Size:
    • grid-gap -> grid-row-gap || grid-column-gap

meshing

In the case of the Grid container, the grain-related attributes are required to divide the parent elements into grie-cells and control the order of the children in the container. Grid-template-rows and grid-template-columns are used to control the grid container’s partitioning of cells. Grid-template-areas are areas that control the division of a Grid container. Each area usually consists of one fire or more cells. Grid-auto-flow controls the order in which the neutrons are placed in the container; Grid-auto-columns and Grid-auto-Rows are used to control the column width and row width of new cells.

Each of these properties has several shorthand properties, but merging properties is not recommended

Partition cell

The grid-template-rows attribute defines the row width of each row, and the grid-template-columns attribute defines the column width of each column. The width of each row or column is indicated by the width of the corresponding position, the parameters are separated by Spaces, and the number of parameters represents the number of rows or columns that the container is divided into. The following example defines a table with three rows and three columns, each with 100px rows and columns

#container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
Copy the code

The display effect is shown in the figure:



The next topic to explore is the units that indicate row width and column height:

  • Absolute unit: Indicates the absolute width of each row or column
  • Percentage: Represents the percentage of a grid container containing a row or column
  • Repeat (): Accepts two parameters, the first parameter indicating the number of repetitions. the second parameter indicating the value of the repetition. The repeating value can be a value or a repeating pattern, such as “100px, 200px, 40px.”
  • Auto-fill: This is used when the cell size is fixed, but the container size is not, and you want to fill rows or columns
  • The FR keyword: is a relative unit indicating the width of a fragment. For example, “1fr 2fr” means that the row or column is divided in two, and the second column or row is twice as wide as the first column or row.
  • Minmax (): This function generates a range of lengths, indicating that the size is within this range, and takes two parameters: a minimum and a maximum
  • Auto: Indicates that the browser determines the length

Finally, we can add square brackets to indicate the name of the grid line, for example: grie-template-rows: [r1] 100px [R2] 100px [R3] auto [r4]; This code divides the grid container into three lines, where the grid line name is the value inside the square brackets and the grid track width is the value between the two brackets.

Divide the area

In a Grid layout, you can divide areas by setting the Grid-template-Areas attribute. The usage mode of this attribute is

grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
Copy the code

The elements contained in each “” represent a row, and each row consists of multiple columns separated by Spaces. This expression is similar to a matrix. If some areas are not needed, they are. To indicate that the area is not applicable.

Element Placement order

The grid-auto-flow attribute is used to control the order of elements. This attribute can refer to three parameter values:

  • Column: The elements are arranged in a column
  • Row: The elements are arranged in a row first
  • Dense: The keyword is about being as dense as possible

Add the row width and column width

One of the most common situations when you’re laying out a Grid is when all the space is taken up, but you still don’t have all the elements down. This is when you need to expand the container size. Grid-auto-rows and Grid-Auto-Columns are used to control the size of new columns and columns.

alignment

There are two types of alignment that need to be described:

  • The first is the alignment of all the contents in the Grid container, controlled by place-content

This works if the container is large and all the elements take up little space. As shown in the figure:

  • The second is the alignment in grid cells, controlled by place-item

This is useful when elements in a container are of uneven size and need to be aligned. As shown in the figure:

As for the specific setting keywords, there are more detailed descriptions in Flexbox there, so I won’t repeat them here.

size

For the Grid layout, the size control, like flexbox, focuses on the gap between elements.

Grid Item

For grid projects, there are only properties that control the size of the grid project and control alignment. The properties that control the size of a grid item are controlled by the size of the cells that the grid item occupies. It includes two methods of grid line control and grid area control.

  • Size:
    • Grid line control:
      • grid-column -> grid-column-start || grid-column-end
      • grid-row -> grid-row-start || grid-row-end
    • Grid area control: grid-area

The grid line control is controlled by specifying the starting and ending grid lines, while the grid area control is related to the grid area name defined in the grid container. Here’s an example:

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3; /* In addition to the number of the grid line, you can also use the name of the grid line and the span keyword to indicate the position of the grid line */
}
Copy the code

The above code means to place.item-1 vertically and horizontally between the first and third grid lines.

  • Alignment: place – self – > align – self | | the justify – self

Individual elements align related attributes in the same way they do in Flexbox.

Multi-column layouts

Multi-column layout is a layout method used to achieve a layout effect similar to newspaper layout. The attributes related to multi-column layout include:

  • Columns: Integrates the column-width and column-count properties
  • Column-width: specifies the column width of each column
  • Column-count: Defines the number of columns to column
  • Column-gap: defines the spacing between columns
  • Column-rule: defines the column border
  • Column-span: Defines the effect of multi-column layout child elements across columns
  • Column-fill: controls the height of each column

Write in the back

This concludes this series of articles on CSS layouts. This series of articles has covered several CSS layouts so far, from basic layouts like document flow and float placement, to one-dimensional Flex layouts, and finally, Grid and multi-column layouts. This series of articles can be regarded as a summary of my study during this period of time. If you like my article, give me a thumbs up. If there is something wrong with the article, please point it out. Thank you. (^▽^)