CSS Grid Layout: Build a powerful and flexible website layout

Core points

• CSS Grid layouts provide a more powerful and flexible way to create complex website layouts without using properties such as inline and float or separate grid system stylesheets.
• Currently, only IE 10 and Edge support CSS Grid layouts, but it can be enabled via specific flags in Chrome and Firefox or using polyfill.
• CSS Grid layouts use units of measurement, lines, tracks, cells, and regions called "fr" to define the layout of elements on a web page.
• CSS Grid layout allows for a complete separation of markers and layouts, making CSS easier to maintain and offers endless possibilities for design.

Grids are crucial when creating complex websites. The importance of grids in modern web design can be seen from the number of frameworks that implement grid systems to speed up development.

With the introduction of the CSS Grid layout specification, you no longer need to include a separate stylesheet to use the grid system. Another advantage is that you no longer need to rely on attributes such as inline and float to arrange elements on the web page. In this tutorial, we will cover the basics of grid systems and create a basic blog layout.

Browser support

Currently, only IE 10 and Edge support Grid layouts – you can’t use it on commercial sites yet.

It can be enabled in Chrome via the "Experimental Web Platform Features" flag in chrome://flags. You can enable it in Firefox using the layout.css.grid.enabled flag.

Another option is to use polyfill. CSS Grid Polyfill does exist! With the various options mentioned above, you can start experimenting with the Grid layout and learn as much as you can when it is still in its infancy.

Note: Internet Explorer currently implements the specifications for older versions. Unfortunately, this means it is not fully compatible with the latest specifications. When studying the examples in this tutorial, it is recommended that you use Chrome or Firefox with the corresponding flag enabled.

Grid system terminology

In terms of laying out elements, the CSS grid system is similar to a table. However, it is more powerful and flexible. In this section, I will discuss some terms that need to be aware of when using a grid:

fr Unit: This unit is used to specify a portion of the available space. It is designed to be used with grid-rows and grid-columns. According to the specification—

Allocating fraction space occurs after all "length" or content-based row and column sizes reach their maximum.

Line: Lines define the boundaries of other elements. They run vertically and horizontally. In the figure below, there are four vertical lines and four horizontal lines.

Road: The track is the space between parallel lines. In the figure below, there are three vertical tracks and three horizontal tracks.

Cell: Cells are the basic building blocks of the grid. In the figure below, there are nine cells in total.

Area: The area is a rectangular shape with any number of cells. Therefore, the track is a area, and the cell is also a area.

Position elements in the grid

Let's start with the basics. In this section, I will teach you how to use a grid to locate elements to specific locations. To use the CSS Grid layout, you need a parent element and one or more children. For demonstration, we will use the following tag as our grid system:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

After completing the tag, you need to apply display: grid or display: inline-grid on the parent element, as shown below:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

grid-template-columns and grid-template-rows properties are used to specify the width of various rows and columns. In the example above, I defined five columns. The 10px column acts as slots to provide the required spacing between elements. The first column has a width of 200px. The third column occupies part 0.3 of the remaining space. Similarly, the fifth column occupies the 0.7 portion of the remaining space.

Use grid-template-rows for the first line in auto to allow the line to expand based on its internal content. 20px The row acts as a slot.

At this point, the elements are closely arranged, as shown in the following demonstration. (The CodePen demo link is omitted here)

Observe that element B is located in the second column we plan to use as a slot. If you do not specify the location of child elements within the grid, the browser places one element in each cell until the first row is fully filled and the rest then goes to the next row. This is why we have four spare columns left in the second row.

To move elements to specific cells in the grid, you need to specify their location in CSS. Before explaining how to move elements using a grid system, check out the image below. (The image link is omitted here)

In this case, we will use "line-based placement". Line-based placement means that lines in our grid system will serve as a guide to placement and limiting elements. Let's take element B as an example. In the horizontal direction, it starts from column 3 and ends from column 4. On the vertical axis, it is located between the line 1 and line 2.

We use grid-column-start to specify the starting vertical line of the element. In this case, it will be set to 3. grid-column-end Indicates the end vertical line of the element. In this case, this property will be equal to 4. The corresponding row values ??will be set similarly.

Considering all of the above, to move element B to the second cell, you will use the following CSS:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Similarly, to move element F to the sixth cell, you will use the following CSS:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

After making these changes to CSS, the elements should be spaced correctly as in this demo. (The CodePen demo link is omitted here)

Create a basic layout

It's time to create a basic blog layout. The blog will have a header, footer, sidebar and two sections for actual content. Let's start with the marker:

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

Remember that the order of elements in the tags does not affect the position of elements on the web page. As long as you don't change the CSS, you can place the footer above the header in the tag, and the position of the elements on the web page does not change. Of course, I don't recommend this. The point is – your marker will no longer determine the location of the element.

What we have to do now is to determine the values ??of the grid-row-end and other attributes of various elements. Just like in the last example, we will use the grid graph to determine the values ??of all grid properties. (The image link is omitted here)

As shown in the figure above, the header goes from column 1 to column 4, and from row 1 to row 2. This should look like this:

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

Similarly, "extra" goes from column 3 to column 4, and from row 5 to row 6. So the CSS would be:

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

The grid properties of all other elements can now be easily determined. Check out the CodePen demonstration and experiment with various grid values ??to better understand line-based placement. (The CodePen demo link is omitted here)

Conclusion

CSS grid layout specifications enable us to easily create complex layouts. The CSS we need to write is simpler and easier to maintain. When creating complex layouts in design, we no longer need to use float or other such attributes. Another huge advantage is the complete separation of marking and layout. With CSS Grid layout, the possibilities are endless.

If you have any questions about this tutorial, please let me know in the comments.

FAQs about CSS Grid Layout

How is the CSS Grid layout different from other CSS layout methods?

CSS Grid layout is a two-dimensional layout system that is different from other CSS layout methods such as Flexbox, which is one-dimensional. This means that with CSS Grid, you can control both horizontal and vertical layouts, which other methods can't do. It is designed to handle more complex designs and large layouts. It is also more flexible and powerful, allowing for more creative and finer design.

How to get started with CSS Grid layouts?

To start using CSS Grid layout, you need to set the display attribute of the element to grid or inline-grid. This makes the element a grid container and its child elements a grid item. You can then use various mesh properties to define the layout of the mesh and the location of the mesh items.

Can I use CSS Grid layout with other CSS layout methods?

Yes, CSS Grid layouts can be used in conjunction with other CSS layout methods. For example, you can use Flexbox for components of your website and CSS Grid for overall layout. This allows you to take advantage of each layout approach.

How to create a grid using CSS Grid layout?

To create a grid using a CSS Grid layout, you first need to define the grid container by setting the display attribute of the element to grid or inline-grid. You can then use the grid-template-columns and grid-template-rows properties to define the number and size of columns and rows in the grid.

How to place an item on a grid?

You can use the grid-column and grid-row properties to place items on the grid. These properties allow you to specify the start and end lines of the project, effectively placing it in a specific cell or cell of the grid.

What are grid lines and grid tracks?

In CSS Grid layout, grid lines are dividers that make up the grid structure. Their numbers start at 1, and the line numbers are incremented from top to bottom and from left to right. A grid track is the space between two adjacent grid lines, which can be a column or a row.

What is the fr unit in the CSS Grid layout?

The fr unit in the CSS Grid layout represents "score". It represents a portion of the available space in the grid container. For example, if you have a grid with three columns and set the width of one column to 1fr and the other two columns to 2fr, the first column will occupy one-third of the available space, and the other The two columns will each occupy one-third.

How to make the grid responsive?

To make the grid responsive, you can use media queries with grid-template-columns and grid-template-rows properties. You can also use the auto-fill and auto-fit keywords with the repeat functions to automatically adjust the number and size of columns and rows according to the size of the viewport.

Can I nest my grid in my grid?

Yes, you can nest grids in a CSS Grid layout. This means you can make the grid project itself a grid container, creating complex nested layouts.

Does CSS Grid layouts be supported by all browsers?

All modern browsers (including Chrome, Firefox, Safari, and Edge) support CSS Grid layouts. However, Internet Explorer does not support it. Therefore, it is important to provide alternate layouts for users who use unsupported browsers.

Please note that since I cannot access external websites and pictures, I cannot directly display the pictures. Please make sure that the image link is added correctly to your final output.

The above is the detailed content of Introducing the CSS Grid Layout. For more information, please follow other related articles on the PHP Chinese website!