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

This article mainly explains "what is the knowledge of CSS grid layout". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what is the knowledge of CSS grid layout"!

Today, there are many features available for modern Web layout, and perhaps everyone is most familiar with Flexbox, and they all think that Flexbox layout can be a shuttle. Although the Flexbox layout has been very powerful, it is still an one-dimensional layout, for some two-dimensional layout scenes, it still has a great limit. This also shows from the side that CSS Grid is still inseparable from modern Web layout or future layout scheme. after all, it is the only technology that supports two-dimensional layout so far. In 2021, I spent a few months going through everything related to CSS Grid, with more than 20 articles on CSS Grid. It can be said that this series is a more systematic introduction of CSS Grid throughout the network. If I haven't touched it yet, or have some fear of CSS Grid, then this series is worth your time to read.

Important terms in CSS Grid

Every functional module has its own technical terms, and CSS Grid is no exception, but the technical terms of CSS Grid cover a wider range. In this article, related terms in CSS Grid are described in detail, such as grid axes, grid containers, grid projects, grid lines, grid cells, grid tracks, grid regions, explicit grids, implicit grids, grid spacing (slots), subgrids and nested grids.

Mesh properties and siz

Once you have some understanding of the technical terms related to CSS Grid layout, you can begin to really understand the attributes that can be used in CSS Grid. In this section, we mainly discuss the properties that can be used for grid containers, as well as setting the size of grid containers and grid projects. To do this, we can define an explicit grid using attributes such as grid-template-columns, grid-template-rows, and grid-template-areas.

Setting of mesh track size

You can explicitly use grid-template-columns and grid-template-rows in CSS Grid to explicitly define grid tracks. However, in this section, we mainly discuss the units that can be used to set the size of the grid orbit, especially the unique unit fr in CSS Grid.

Define the mesh track size using the internal size

In addition to setting the grid track size in grid-template-columns and grid-template-rows using length units (), percentage units (), and elastic factor units (fr), you can also use some keywords (such as none, auto, min-content, max-content, fit-content, and fit-content ()) to set the grid track size. Among them, min-content, max-content and fit-content are also called internal dimensions to set the grid track size.

Available functions in the grid

In grid-template-columns and grid-template-rows, in addition to using fixed length values, dynamic values, and some keywords to set the size of the grid track (that is, using external and internal dimensions to set the mesh track size). We can also use some functions in CSS Grid, such as minmax (min, max), repeat (), and CSS's comparison functions (such as min (), max (), and clamp (), etc.) to set the grid track size, and even these functions can be nested within each other.

Explicit grid and implicit grid

An explicit grid can be explicitly defined using grid-template-columns, grid-template-rows, and grid-template-areas. In addition, you can use grid-auto-columns, grid-auto-rows, and grid-auto-flow to define an implicit grid.

Automatic placement of grid items

In a CSS Grid layout, you can explicitly place a grid project at a specified location in the grid by using properties such as grid-row, grid-column, and grid-area on the grid project. In addition, the CSS Grid layout specification contains another set of rules for how grid items that are not explicitly specified should be placed. Even if you use grid-auto-flow to set the automatic placement of the mesh.

Grid lines in grid layout

Gridline is a very important concept in CSS grid system. By default, grid line names (row grid line names and column grid line names) with numeric index numbers are created by default whenever a grid system is defined. In addition, you can explicitly specify the name of the grid lines in square brackets [] in grid-template-columns and grid-template-rows. As mentioned earlier, there are explicit grids and implicit grids in CSS grid systems. Similarly, gridlines can be divided into explicit gridlines and implicit gridlines. Gridlines on explicit grids are called explicit gridlines, and gridlines located on implicit grids are called implicit gridlines. And in the grid system, grid lines can not be placed without grid lines. In other words, the naming of grid lines will directly affect the placement of grid projects. In this article, we will mainly discuss how to name gridlines. If you are interested, please read on.

Grid lines are very important in grid layout system. Although the previous content does not elaborate on the knowledge of grid lines in the grid layout system, it is not difficult to find that grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow and other attributes in the grid container will create grid lines, and grid-column, grid-row and grid-area on grid projects can place grid projects through grid lines. And it brings more possibilities when creating a layout system. In this section, we will delve into the various ways to name grids in CSS grid layouts and some of the interesting possibilities that arise.

Place a grid project

In CSS Grid, in addition to automatically placing grid items (usually using grid-auto-rows, grid-auto-columns, and grid-auto-flow), you can explicitly place grid projects by explicitly setting grid line names using grid-row, grid-column, and grid-area in grid projects.

Automatic placement algorithm of grid items

In the CSS grid layout, there are many ways to explicitly place the grid project in a specified location. For example:

Use grid-row-start, grid-row-end, grid-column-start, and grid-column-end to specify gridline names and place grid items

Use the abbreviated properties grid-row and grid-column of grid-row-start, grid-row-end, grid-column-start and grid-column-end to specify the gridline name and place the grid project

Use grid-area to specify the grid name or specify the grid area name defined by grid-template-areas to place the grid project

Specify gridline names in grid-row-start, grid-row-end, grid-column-start, grid-column-end or grid-row, grid-column, and use span to specify merged grid cells. Their combination to place grid projects

Place grid items by specifying gridline names defined by grid-template-rows, grid-template-columns, and grid-template-areas in grid-row-start, grid-row-end, grid-column-start, grid-column-end (and their abbreviated properties grid-row, grid-column) or grid-area

Place the grid project using the named gridline name and span keyword

Specify the name of the grid area created by grid-template-areas or grid-template-rows and grid-template-columns in grid-area, and place the grid project

However, in the grid layout system, the placement of grid projects has its own set of mature algorithms. In this chapter, we talk about the algorithm of CSS Grid grid project placement (automatic placement and explicit placement) in five steps.

Overlap of grid projects and hierarchy of z-axis

Grid projects can use properties such as grid-row, grid-column, and grid-area to explicitly specify the location of the grid project based on the grid line name. This allows grid projects to overlap each other. In other words, in CSS Grid, you can overlap grid projects in the following ways:

Use grid thread quotation marks

Use named gridlines

Use named grid areas

Merge grid cells (that is, across grid projects)

More interestingly, CSS grid projects do not need to explicitly set position to a value other than static to trigger z-index to take effect, that is, when grid projects overlap, you can explicitly set z-index on grid projects directly to control the grid project level on the z-axis.

Alignment and spacing in grid layout

If you are familiar with the alignment in the Flexbox layout, it is easy to master the alignment in CSS Grid. Because it is very similar to Flexbox, both use features in the CSS Box Alignment Module Level 3 specification. In this chapter, we describe in detail the alignment of grid projects and grid tracks in the grid layout, as well as the relationship between alignment and margin (how to use margin to set the alignment of grid projects).

In addition, at the end of the article, the gap property is introduced, that is, how to use gap to set the spacing between grid tracks (commonly known as the size of mesh slots).

Aspect ratio of grid project

This chapter mainly discusses the setting of the aspect ratio of the grid project, that is, the application of the aspect-ratio property of CSS in the grid. In addition, it also introduces how padding-top or padding-bottom, as well as CSS custom properties and the calc () function, implement the aspect ratio of grid projects.

Writing Mode in Grid

In this article, I mainly talked to you about the logical properties of CSS and the impact of CSS's writing mode on grid layout. For example, the relationship between automatic placement of grid items and writing mode, the relationship between grid items based on grid lines and writing mode, and the relationship between grid region and writing mode.

Nested grid vs. Subgrid

For some time, there has been a lot of discussion about the use of subgrid, how to implement it, and even some debate about whether it is needed or not. Much of the discussion revolves around two other ways to deal with many of the same problems as subgrid: nested grids and display: contents. This article uses nested grids as a starting point and delves into nested grids and subgrid, that is, we will learn what is similar and what is the difference between subgrid and nested grids. And explain that in some very effective cases, the subgrid is really needed, while in other cases, it is not strictly required, but will lead to a more concise solution.

Subgrid vs display: contents

Before subgrid entered the Level 2 specification of the CSS Grid layout module, nested grids, subgrid, and display: contents had an in-depth discussion, resulting in more support for subgrid and eventually becoming part of the specification. That is, both nested grids and display: contents can implement subgrid-like layouts. So in this chapter, let's talk about display: what's the difference between contents and subgrid?

Waterfall flow layout

Since multi-column layout, Flexbox layout and Grid layout have been supported by browsers, these features can be used to implement the layout of waterfall flow, but the layout of waterfall flow implemented by these technologies has more or less defects. Fortunately, however, level 3 of the CSS grid layout (CSS Grid Layout Module Level 3) incorporates the real waterfall flow layout into the W3C specification, which is called the real waterfall flow layout. Unfortunately, there are not many mainstream browsers that support the draft specification, only Firefox and Firefox Nightly. Although this feature cannot be used in actual production, your trial and feedback after use is valuable, which helps to ensure that it meets your requirements for this layout.

Grid reviewer adjusts grid layout

From the previous content, it is not difficult to find the complexity and flexibility of grid layout. I think you are aware that the way layout is designed in Web has changed since the arrival of CSS Grid. We can sketch the layout on paper and think about the whole content of the layout design. When you start tapping the code, you already know what the layout will look like. Because of the complexity of the CSS Grid layout, coupled with the grid defined on the grid container, the grid is invisible. For this reason, we have to consider how to use the grid more easily, or encounter Bug related to grid layout, and how to debug it. Students who are familiar with Web development know that when debugging layout or CSS-related problems, they like to add a border to the element. In grid layout, although we can use similar methods to add borders in grid containers and grid projects to help us quickly locate, we cannot add borders to grid lines. Fortunately, the current mainstream browsers, such as Chrome, Firefox, Safari, and Microsoft Edge's developer tools (DevTools), all provide grid layout reviewers. With these tools, we can quickly help us to use the grid and debug the problems encountered in using the grid.

Cases and characteristics of Grid layout

The emergence of the CSS Grid module and browser support for it provide unprecedented possibilities for Web layout. We can build more complex designs with fewer elements (a more concise HTML structure). This is much stronger than Flexbox, which we always thought was very powerful. But when you think of CSS Grid, you usually think of the square layout that we are used to, right? @ Andy Barefoot offers a lot of creative responsive layouts on his website and on Codepen, giving you a fresh look at Web layouts, feeling like your classic Web design (square layout), and he uses CSS Grid layouts to do this.

Build overlapping layouts using grids

In the CSS Grid layout, we can overlap different elements by placing grid items, and control the cascading order of grid projects on the z-axis through the z-index of CSS. In other words, layouts that used to be implemented using the absolute positioning (absolute) of CSS's position can now be solved directly using CSS Grid. In this case, we focus on how to use CSS Grid to achieve the layout effect of element overlay.

Using Grid to build Full-Bleed layout

Full-Bleed is a concept in the printing world, known as total bleeding, that is, in printing, we have blood loss, which is outside the area where the paper is trimmed. For this reason, printing designers are used to considering the amount of bleeding in their design work. We do this by setting up security zones. In recent years, this concept, known as "total bleeding", has also been applied to the layout of Web. Is to use a layout of full-width elements in a column with limited width, such as an edge-to-edge image in a narrower column of text. In the community, some people call this layout effect Full-Width layout, and some people call it Edge-To-Edge layout. To tell you the truth, it is not difficult to achieve this layout effect in Web, and there are many different technical solutions in the community that can achieve this layout effect. However, today we think about this issue from a different point of view!

Build cross layouts using grids

This case introduces another grid layout built by CSS Grid, that is, cross layout. Through this case to better help us better understand how the relevant properties of CSS Grid are used in practice (Web layout).

Using Grid to construct the layout of magazines and Newspapers

For a long time, the Web layout is a square rectangle to show the UI effect to the user, and this is also the case in the minds of many Web developers, the Web layout can not break the limitation of rectangular arrangement! But the development of Web technology is amazing, and something new appears in front of us every day. In just a few years, there have been a lot of new features for Web layouts. In other words, if the designer says to you today, "Dear, the whole layout is similar to that of magazines or newspapers." You'll just say OK! That is, using the current new features can break the limitation of rectangles, allowing you to achieve magazine-like layout on Web.

At this point, I believe that everyone on the "CSS grid layout knowledge what" have a deeper understanding, might as well to the actual operation of it! 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.