Detailed knowledge about CSS grid layout that you must not miss!

This article will share with you some knowledge points about CSS grid layout and take you to learn more about CSS grid layout. I hope it will be helpful to you!

Today, there are many features that can be used for modern web layout. Perhaps the most well-known one is Flexbox, and everyone thinks that Flexbox layout can be easily solved. Although Flexbox layout is very powerful, it is still a one-dimensional layout. For some two-dimensional layout scenarios, it still has great limitations. This also shows from the side that CSS Grid is still indispensable in modern Web layout or future layout solutions. After all, so far, it is the only technology that supports two-dimensional layout. In 2021, I spent a few months reviewing everything related to CSS Grid, and explained CSS Grid through more than 20 articles. It can be said that this series is the most systematic introduction to CSS Grid on the entire Internet. If I haven't been exposed to it yet, or have a certain fear of CSS Grid, this series is worth your time.

Important terms in CSS Grid

Any functional module has its own professional terminology, and CSS Grid is no exception. It's just that the technical terminology of CSS Grid covers a wider range. In this article, related terms in CSS Grid are explained in detail, such as grid axis, grid container, grid item, grid line, grid cell, grid track, grid area, explicit grid , implicit grid, grid spacing (grid slot), sub-grid and nested grid, etc.

Grid properties and dimensions

After you have a certain understanding of technical terms related to CSS Grid layout, you can start the real Learn about the properties available in CSS Grid. In this section, we will mainly discuss with you the properties that can be used for grid containers, and set the sizes of grid containers and grid items. For this purpose we can define an explicit grid using properties such as grid-template-columns, grid-template-rows and grid-template-areas.

Grid track size settings

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

Use intrinsic dimensions to define grid track dimensions

In addition to grid-template-columns and grid-template-rows you can use In addition to setting the grid track size in length units (), percentage units () and elastic factor units (fr), you can also use some keywords (for example, 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 using intrinsic dimensions to set the grid track size.

Available functions in grid

##In addition to using fixed-length values ​​in grid-template-columns and grid-template-rows , dynamic values, and some keywords to set the size of the grid track (i.e., use extrinsic and intrinsic dimensions to set the grid track size). We can also use some functions in CSS Grid, such as minmax(min, max), repeat() and CSS comparison functions (such as min(), max() and clamp() functions) to set the grid track size, and even These functions can also be nested within each other.

Explicit grid and implicit grid

Using grid-template-columns, grid-template-rows and grid -template-areas can explicitly define an explicit grid. 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 CSS Grid layout, use grid-row, grid-column and Properties such as grid-area can explicitly place grid items at specified locations in the grid. In addition, the CSS Grid layout specification also contains another set of rules for how grid items that are not explicitly specified should be placed. That is, use grid-auto-flow to set automatic grid placement.

Grid lines in grid layout

In the CSS grid system, grid lines are a very important concept. By default, whenever a grid system is defined, numerical grid line names (row grid line names and column grid line names) are created by default. In addition, you can also explicitly specify names for grid lines in square brackets [] in grid-template-columns and grid-template-rows. As mentioned earlier, the CSS grid system is divided into explicit grid and implicit grid. Similarly, grid lines are also divided into explicit grid lines and implicit grid lines, which are located on the explicit grid. The grid lines are called explicit grid lines, and the grid lines located on the implicit grid are called implicit grid lines. And in the grid system, grid lines are indispensable when clearly placing grid items. In other words, the naming of grid lines will directly affect the placement of our grid items. In this article, we will mainly discuss with you how to name grid lines? If interested, please continue reading.

Grid lines are very important in grid layout systems. Although the previous content does not elaborate on the relevant 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, Properties such as grid-auto-columns, grid-auto-rows, and grid-auto-flow will create grid lines, and grid-column, grid-row, and grid-area on grid items can place grids through grid lines. lattice project and opens up even more possibilities when creating layout systems. In this section, we’ll take a closer look at the various ways to name grids in CSS grid layouts, and some of the interesting possibilities that arise from them.

Place Grid Items

In addition to automatically placing grid items in CSS Grid (usually using grid-auto-rows, In addition to grid-auto-columns and grid-auto-flow), you can also explicitly use grid-row, grid-column and grid-area to set the grid line name on the grid item to explicitly place the grid item.

Automatic placement algorithm of grid items

In CSS grid layout, we can have many ways to place grid items Explicitly place it in the specified location. For example:

• Use grid-row-start, grid-row-end, grid-column-start and grid-column-end to specify the grid line name and place the grid items
• Use the abbreviation properties grid-row and grid-column of grid-row-start, grid-row-end, grid-column-start and grid-column-end to specify the grid line name and place the grid items
• Use grid-area to specify the grid name or specify the grid area name defined by grid-template-areas, and place the grid items
• in grid-row-start, grid-row-end, grid-column- start, grid-column-end or grid-row, grid-column specifies the grid line name, and span is used to specify the merged grid cells. Their combination to place grid items
• in grid-row-start, grid-row-end, grid-column-start, grid-column-end (and their shorthand attributes grid-row, grid-column ) or the grid line name defined by grid-template-rows, grid-template-columns and grid-template-areas specified in grid-area, place the grid item
• Use the named grid line name and span keyword, place grid items
• Specify the name of the grid area created by grid-template-areas or grid-template-rows and grid-template-columns in grid-area, place grid items

However, in the grid layout system, the placement of grid items has its own mature algorithm. In this chapter, we divide it into five steps to talk about the CSS Grid grid item placement algorithm (automatic placement and explicit placement).

Overlap of grid items and level of z-axis

Grid items can use grid-row, grid-column and grid-area Properties such as Grid Item Position explicitly specify grid item positions based on grid line names. This allows grid items to overlap each other. In other words, in CSS Grid, you can use the following methods to make grid items overlap each other:

• Use grid line index numbers
• Use named grid lines
• Use named grid regions
• Merge grid cells (i.e., across grid items)

Even more interestingly, CSS grid items do not You need to explicitly set position to a non-static value to trigger z-index to take effect. That is to say, when grid items overlap, you can explicitly set z-index directly on the grid items to control the z-axis of the grid items. level.

Alignment and Spacing in Grid Layout

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

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

The aspect ratio of the grid project

This chapter mainly discusses the width and height ratio of the grid project with you. The setting of high ratio, that is, the application of aspect-ratio attribute of CSS in the grid. In addition, it also introduces padding-top or padding-bottom as well as CSS custom properties and calc() function to implement the aspect ratio of grid items.

Writing mode in grid

In this article, I mainly talk to you about the logic of CSS The impact of properties and CSS writing modes on grid layout. For example, the relationship between automatic placement of grid items and writing mode, the relationship between placing grid items based on grid lines and writing mode, and the relationship between grid area and writing mode, etc.

Nested Grids vs. Subgrids

For some time, there has been a lot of discussion about the use of subgrid and how to implement it. There was a lot of discussion about the issue and even some debate about whether it was needed. A lot of the discussion has been around two other methods that deal with many of the same problems as subgrid: nested grids and display: contents. This article uses nested grid as an entry point, and elaborates on nested grid and subgrid in depth, that is, we will understand what are similar and what are the differences between subgrid and nested grid? As well as stating that there are some very efficient cases where subgrids are really needed, while in other cases it's not strictly needed but will lead to a cleaner solution.

subgrid vs display: contents

subgrid Before entering the Level 2 specification of the CSS Grid layout module, nested grid, subgrid There were in-depth discussions with display: contents, and eventually subgrid received more support and eventually became part of the specification. In other words, both nested grids and display: contents can achieve a subgrid-like layout. In this chapter, let’s discuss with you what is the difference between display: contents and subgrid?

Waterfall layout

Since multi-column layout, Flexbox layout and Grid layout are supported by browsers, you can use these features to achieve Waterfall flow layout, but the waterfall flow layout implemented by these technologies has more or less certain defects. However, thankfully, CSS Grid Layout Module Level 3 incorporates the true waterfall flow layout into the W3C specification, which can be called a true waterfall flow layout. Unfortunately, there are not many mainstream browsers that support this draft specification, only Firefox and Firefox Nightly. While this feature isn't ready for production use yet, your trial and feedback after use is valuable to ensure it meets your requirements for this layout.

Grid Inspector Adjust Grid Layout

From the previous contents, it is not difficult to find the complexity of grid layout. flexibility. I think everyone has realized that after the arrival of CSS Grid, the method of designing layout in the Web has also changed. We can sketch the layout on paper and think about what the layout design is all about. When you start typing code, you already know what the layout will look like. Because of the complexity of CSS Grid layout, and the fact that the grid defined on the grid container is invisible. For this reason, we have to consider how to use grids more easily, or how to debug grid layout-related bugs. Students who are familiar with web development know that when debugging layout or CSS-related issues, they like to add a border to an element. In grid layout, although similar methods can be used to add borders to grid containers and grid items to help us quickly position, we cannot add borders to grid lines. Fortunately, the current mainstream browsers, such as Chrome, Firefox, Safari and Microsoft Edge browser developer tools (DevTools) all provide grid layout inspectors. With these tools, we can quickly help us use the grid and debug problems encountered when using the grid.

Grid Layout Cases and Characteristics

The emergence of the CSS Grid module and browser support for it provide a better way for Web layout Unprecedented possibilities. We can build more complex designs with fewer elements (simpler HTML structure). This is much more powerful than Flexbox, which we have always considered very powerful. But when you think of CSS Grid, you usually think of the square layout we’re used to, right? @Andy Barefoot provides a lot of creative responsive layout effects on his personal website and Codepen, which will give you a completely new feel for Web layout, feeling similar to your classic Web design (regular square layout), and He uses CSS Grid layout to do this.

Using grid construction to build overlapping layouts

In CSS Grid layout, we can place grid items, Let different elements overlap each other, and control the stacking order of grid items on the z-axis through CSS's z-index. In other words, the layout that used to be implemented using the absolute positioning of CSS position can now be solved directly using CSS Grid. In this case, we mainly look at how to use CSS Grid to achieve the layout effect of element overlay.

Build a Full-Bleed layout using grid

Full-Bleed is a concept in the printing world known as full bleed, that is, in printing, we have bleed, which is the area outside of where the paper is trimmed. Because of this, print designers are used to considering bleed in their design work. We do this by setting up safe zones. In recent years, this concept called "full bleed" has also been applied to the layout of the Web. This is a layout that uses full-width elements in a column of restricted width, such as an edge-to-edge image in a narrower column of text. In the community, some people also call this layout effect Full-Width layout, and some people call it Edge-To-Edge layout. To be honest, it is not difficult to achieve this layout effect on the Web. There are many different technical solutions in the community that can achieve this layout effect. Today, though, we’re thinking about it from a different angle!

Using grid to build cross layout

This case is to introduce another grid layout built by CSS Grid, that is, cross layout. This case will better help us further understand how the related properties of CSS Grid are used in practice (Web layout).

Using grids to build magazine and newspaper layouts

For a long time, square rectangles have been used in Web layouts Show the UI effect to users, and this is also true in the consciousness of many Web developers. The layout of the Web cannot break the limitation of rectangular arrangement! But the development speed of Web technology is amazing, and new things appear in front of us every day. In just a few short years, there have been so many new features for web layout. In other words, if a designer tells you today: "Dear, let's create a layout similar to a magazine or newspaper"! You will happily say OK! That is, using the current new features can break the limitations of the rectangular frame, allowing you to achieve a magazine-like layout on the Web.

(Learning video sharing: css video tutorial)

The above is the detailed content of Detailed knowledge about CSS grid layout that you must not miss!. For more information, please follow other related articles on the PHP Chinese website!