Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the grid layout in CSS Grid layout", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the grid layout in CSS Grid layout.

Why do we need grid layout?

In our Web content, it can be divided into many content blocks, and these content blocks occupy their own regions, which can be thought of as a virtual grid. So far, different structural tags have been used in one template, multiple floats and manual calculations have been used to implement a layout. This is a painful thing for the Web front-end staff. The grid layout will let you out of this dilemma and make your layout method very simple and clear.

Grid layouts give us a way to create structures that are no different from using table layouts. However, it is implemented in CSS rather than HTML, and it can also rely on media queries to redefine layouts based on different contexts. This is absolutely good news for students who like responsive design. Because you no longer need to worry about your HTML structure and affect your layout.

Grid layout also allows us to get rid of the document flow restrictions that exist in the current layout, in other words, your structure does not need to be arranged from top to top according to the design draft. This also means that you are free to change the location of the page elements. This is best for you to implement the layout you need most at different breakpoints, without having to worry about the HTML structure in response to your design.

What is CSS Grid Layout?

CSS Grid Layout is a new module that CSS adds to the layout. Grid layout features are mainly aimed at developers of Web applications. You can use this module to implement many different layouts. Network layouts can divide applications into different spaces or define their size, location, and hierarchy.

Like tables, grid layouts allow Web designers to align elements by column or row, but unlike tables, grid layouts have no content structure, making it impossible for various layouts to be the same as tables. For example, child elements in a grid layout can be positioned so that they can overlap and similar elements.

In addition, a grid layout without a content structure helps to manage or change the layout using techniques such as fluid, ordering, and so on. By combining the media query properties of CSS, you can control the grid layout containers and their child elements, and use the layout of the page to adjust the display style and positioning of the elements according to different devices and available space, without the need to change the nature of the document structure.

Browser compatibility

From a public point of view, it is only supported on IE10+, and only some attributes are supported. Maybe many students will stop again when they see this compatibility, or they will leave with a twinkle. However, we learn that it is defenseless, and we can test the effect by setting it in various browsers. Next time, we will show you how to turn on this function in the browser.

Grid vs Flexbox

In www-list emails, we often see a phenomenon of competition: when it comes to grid, we will refer to Flexbox. Assuming that browsers support both modules, you will choose grid or flexbox to lay out the page. In fact, when you understand the two, you will easily make a choice. Flexbox is an one-dimensional layout, it can only place your content blocks on a straight line, while grid is a two-dimensional layout. As mentioned briefly earlier, you can put the content block anywhere you want according to your design requirements. So needless to say, you should know which one suits your layout better.

Grid terminology

If you want to play CSS Grid Layout, you need to understand some new terms given to us by the grid and some CSS properties and values. In this section, we will briefly explain some concepts and terms in grid layout.

Gridlines (Grid Lines)

Grid lines make up the grid, which is the horizontal and vertical dividing line of the grid. A grid line exists on both sides of a row or column. We can refer to its number or the name of the grid lines defined.

The red lines highlighted in the image above are the gridlines (line2) in the second column.

Grid orbit (Grid Track)

A grid track is the space between two adjacent grid lines, just like rows or columns in a table. In the grid, it is divided into grid column and grid row. Each grid track can be set to a size to control the width or height.

What is highlighted in the figure is the grid track between the rows line2 and line3.

Grid cell (Grid Cell)

A grid cell is the space between four grid lines. So it's the smallest unit, like a cell in a table.

The highlighted cells in the figure are made up of row lines line2, line3 and lists line2 and line3.

Grid area (Grid Area)

A grid area is a space made up of any four grid lines, so it may contain one or more cells. Equivalent to the range after the merged cells in the table.

The grid area highlighted in the figure is the area between row lines line1, line3 and column lines line2 and line4, which mainly includes four grid cells.

Grid container (Grid Containers)

By explicitly setting the attribute value grid or inline-grid for the element by using the display attribute, the element automatically becomes a grid container. This is similar to flexbox, where the element is set to display:flex and the element automatically becomes the elastic box model.

Because the grid container is not a block container, some attributes will fail in the grid layout:

Using all the column-* attributes in the multi-column layout module on grid containers using invalid float and clear on grid projects (grid cell Grid Cell) using invalid vertical-align on grid cells will fail: pseudo elements such as: first-line and:: first-letter cannot be applied to grid container grid cell order (order)

The grid cell order is the same as the Flexbox module, which rearranges the grid cell parent cell order through the order attribute.

At this point, I believe you have a deeper understanding of "how to understand the grid layout in CSS Grid layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.