Today, there are a lot of features available for modern Web layouts, perhaps the best known of which is Flexbox, which everyone thinks can be used with a shuttle. Although the Flexbox layout is very powerful, it is still one-dimensional, and for some 2d scenarios, it is extremely limited. This also shows that CSS Grid is indispensable for modern Web layout or future layout schemes, after all, so far, it is the only technology that supports two-dimensional layout. In 2021, I spent several months, related to the CSS Grid are all covered, through more than 20 articles to elaborate on CSS Grid. It can be said that this series is a systematic introduction of CSS Grid in the whole network. If I haven’t done it yet, or if I have a phobia about CSS Grids, this series is worth your time.
Important terms in CSS grid
Any functional module has its own technical terms, CSS Grid is no exception, but CSS Grid technical terms cover more scope. In this article, related terms in CSS Grid are elaborated, such as Grid axis, Grid container, Grid project, Grid line, Grid cell, Grid track, Grid region, explicit Grid, implicit Grid, Grid spacing (Grid slot), sub-grid and nested Grid, etc.
Grid properties and dimensions
Once you understand the technical terms associated with CSS Grid layouts, you can begin to really understand the properties available in CSS grids. In this section, we will discuss the properties available for grid containers and set the size of grid containers and grid items. To do this, we can define an explicit grid using grid-template-columns, grid-template-rows, and grid-template-areas attributes.
Grid track size setting
Grid-template-columns and grid-template-rows can be used to explicitly define Grid tracks in CSS grids. However, in this section, we mainly discuss the units that can be used to set the Grid track size, especially the unique CSS Grid unit FR.
Define grid track dimensions using intrinsic dimensions
In addition to grid-template-columns and grid-template-rows, you can use length units (
), percentage units (
Available functions in the grid
Grid-template-columns and grid-template-Rows use fixed length values, dynamic values, and some keywords to set the grid track size (that is, the grid track size is set with external and internal dimensions). You can also use functions such as Minmax (min, Max), repeat(), and CSS comparison functions such as min(), Max (), and clamp() to set the Grid track size in the CSS Grid, and these functions can even be nested with each other.
Explicit and implicit grids
An explicit grid can be explicitly defined using grid-template-columns, grid-template-rows, and grid-template-areas. In addition, you can define an implicit grid using grid-auto-columns, grid-auto-rows, and grid-auto-flow.
Automatic placement of grid items
In A CSS Grid layout, using properties such as grid-Row, grid-column, and grid-area on Grid items explicitly places Grid items at specified locations in the Grid. In addition, the CSS Grid layout specification contains another set of rules for how Grid items that are not explicitly located should be placed. Grid-auto-flow is used to set up automatic grid placement.
Grid lines in a grid layout
Grid lines are a very important concept in CSS grid systems. By default, gridline names (row gridline names and column gridline names) with numeric index numbers are created whenever a grid system is defined. In addition, grid-template-columns and grid-template-rows can be used to explicitly name grid lines in brackets []. As mentioned above, CSS grid system has explicit grid and implicit grid, similarly, there are explicit grid lines and implicit grid lines, the grid lines located on the explicit grid are called explicit grid lines, the grid lines located on the implicit grid is called implicit grid lines. Moreover, in the grid system, grid lines are indispensable for the clear placement of grid items. In other words, the naming of grid lines will directly affect the placement of grid items. In this article, we will mainly discuss how to name grid lines. Read on for those interested.
Grid lines are important in grid layout systems. Although the previous content did not elaborate on the knowledge related to grid lines in the grid layout system, it is not difficult to find that In the grid container Grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow, and other attributes create gridlines. Grid-columns, grid-rows, and grid-areas on grid items can be placed with grid lines, and it opens up more possibilities when creating a layout system. In this section, we’ll delve into the various ways you can name a grid in a CSS grid layout, and some of the interesting possibilities that arise from that.
Placing grid items
In addition to automatically placing Grid items (grid-auto-rows, grid-auto-columns, and grid-auto-flow are commonly used), CSS grids can also explicitly use grid-row, grid-column, and grid-auto-flow Grid items Grid-area Sets the grid line name to explicitly place grid items.
Automatic grid item placement algorithm
In A CSS grid layout, there are many ways to explicitly place grid items in specific locations. Such as:
- use
grid-row-start,grid-row-end,grid-column-start和grid-column-endSpecify the grid line name and place the grid item - use
grid-row-start,grid-row-end,grid-column-start和grid-column-endShort for property ofgrid-row和grid-columnSpecify the grid line name and place the grid item - use
grid-areaSpecifies the grid name or specifiesgrid-template-areasDefines the name of the grid area to place the grid item - in
grid-row-start,grid-row-end,grid-column-start,grid-column-end或grid-row,grid-columnSpecify a grid line name and usespanTo specify the merged grid cells. They combine to place grid items - in
grid-row-start,grid-row-end,grid-column-start,grid-column-end(and its shorthand propertiesgrid-row,grid-column) orgrid-areaSpecified in thegrid-template-rows,grid-template-columns和grid-template-areasDefine the grid line name to place the grid item - Use the named grid line names and
spanKey words, place grid project - in
grid-areaThe specifiedgrid-template-areasorgrid-template-rowsandgrid-template-columnsName of the grid region created to place the grid project
However, in grid layout system, grid item placement has its own set of mature algorithms. In this chapter, we will talk about the algorithms for CSS Grid Grid project placement (automatic placement and explicit placement) in five steps.
Grid item overlap and z axis hierarchy
Grid projects can be explicitly located based on the grid line name using grid-row, grid-column, and grid-area attributes. This allows grid projects to overlap each other. In other words, in a CSS Grid, there are several ways to overlap Grid projects:
- Use grid clue quotes
- 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 non-static value to trigger z-index. In other words, when grid items overlap, z-index can be explicitly set directly on grid items to control the hierarchy of grid items on the Z-axis.
Alignment and spacing in grid layouts
Alignment in CSS Grid is easy to grasp if you are familiar with alignment in Flexbox layouts. Because it is very similar to Flexbox, both use 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 property is introduced, that is, how to use gap to set the spacing between grid tracks (commonly known as mesh slot size).
Aspect ratio of grid project
This chapter mainly discusses the setting of aspect ratio of grid project, that is, the application of aspect-ratio property of CSS in grid. In addition, padding-top or padding-bottom, as well as CSS custom properties and calc() functions are introduced to implement aspect ratios for grid projects.
Writing patterns in the grid
In this article, we mainly talk about the logical properties of CSS and CSS writing mode on the grid layout. For example, the relationship between automatic placement of grid items and writing mode, the relationship between grid item placement based on grid lines and writing mode, and the relationship between grid area and writing mode.
Nested grid vs. sub-grid
For some time now, there has been a lot of discussion about the use of the SubGrid, how to implement it, and even some debate about whether it is needed at all. Much of the discussion revolves around two other approaches that can handle many of the same problems as subgrid: nested grids and display: contents. This article will take nested grids as a starting point and elaborate on nested grids and subgrids in depth. That is, we will learn what are similar and what are the differences between subgrids and nested grids? And explain that in some very effective cases, sub-grids are really needed, while in other cases, it is not strictly needed, but leads to a cleaner solution.
subgrid vs display: contents
Nested grids, subgrids, and display: contents were discussed in depth before subgrid entered the Level 2 specification of the CSS Grid layout module, and subgrids eventually gained more support and eventually became part of the specification. That is, both nested grids and display: contents can achieve a subgrid-like layout. So what’s the difference between display: Contents and subgrid in this chapter?
Waterfall flow layout
Since multi-column layouts, Flexbox layouts, and Grid layouts have been supported by browsers, it has been possible to use these features to implement waterfall layouts, but the waterfall layouts implemented by these technologies are more or less flawed. Thankfully, however, CSS Grid Layout Module Level 3 (CSS Grid Layout Module Level 3) incorporates the true waterfall Layout into the W3C specification and deserves to be called a true waterfall Layout. Unfortunately, there aren’t many major browsers that support the draft specification, just Firefox and Firefox Nightly. While this feature isn’t ready for production yet, your trial and feedback after use will be valuable to ensure that it meets your requirements for this layout.
The Grid censor modulates the grid layout
From the previous content, it is not difficult to find the complexity and flexibility of grid layout. I think you’re aware that with the advent of CSS Grid, the way layouts are designed on the Web has changed. We can sketch the layout on paper and think about the whole layout design. When you start typing code, you already know what the layout is going to look like. Because of the complexity of CSS Grid layouts, grids defined on Grid containers are not visible. We have to think about how to make it easier to use the grid, or how to debug grid layout related bugs. Those of you familiar with Web development know that when debugging layout or CSS-related problems, you like to add a border to an element. In grid layout, we can use a similar method to add borders to grid containers and grid items to help us locate quickly. But we can’t add borders to grid lines. Fortunately, major browsers such as Chrome, Firefox, Safari, and Microsoft Edge’s DevTools provide grid layout censors. With these tools, we can quickly help us to use the grid, debugging problems encountered with the grid.
Grid layout cases and features
With the advent of the CSS Grid module, and browser support for it, the possibilities for Web layout are unprecedented. We can build more complex designs with fewer elements (and cleaner HTML structures). This is much more powerful than the Flexbox, which we always thought was very powerful. But when you think of a CSS Grid, you usually think of the square layout we take for granted, right? Barefoot @Andy provides a number of creative, responsive layout effects on his personal website and Codepen to give you a new look at your Web layout that feels different from your classic Web design (formal square layout), And he uses a CSS Grid layout to do this.
Use grid building to build overlapping layouts
In a CSS Grid layout, we can overlay different elements by the way Grid items are placed, and control the sequence of Grid items on the Z-axis by using the CSS Z-index. In other words, CSS Grid can be used to solve the layout that used to be absolute with CSS position. In this case, we will focus on how to use CSS Grid to achieve the layout effect of element stacking.
Build the full-bleed layout using a grid
Full-bleed is a concept in the printing world called total Bleed, which means that in printing, we have bleeding, which is the area outside of where the paper is being cut. Because of this, print designers are used to considering the amount of bleeding in their design work. We do this by setting up safe areas. In recent years, this concept, known as “total bleeding,” has also been applied to the layout of the Web. A layout that uses full-width elements in a column of limited width, such as an edge-to-edge image in a narrow column of text. In the community, this effect is also referred To as a full-width layout or edge-to-edge layout. To be honest, it’s not difficult to achieve this layout on the Web, and there are many different technical solutions in the community that can achieve this layout. But today we think about it in a different way!
Use grids to build crossover layouts
This case is to introduce CSS Grid construction of another Grid layout, namely the cross layout. Through this case to help us further understand the CSS Grid related properties in practice (Web layout) how to use.
Use grid to build magazine layout
For a long time, the Web layout has been used to present the UI to the user in square rectangles, and many Web developers are aware that the layout of the Web cannot break the restriction of rectangular arrangement! But the pace of development of Web technology is amazing, and there are new things appearing before our eyes every day. In just a few short years, new features for Web layouts have become extraordinary. In other words, if a designer came to you today and said, “Oh, put a whole magazine or newspaper layout!” You will readily say OK! That is, with the new features now available, you can break away from the rectangular box and achieve a magazine-like layout on the Web.
summary
This series is part of the Illustrated CSS series on CSS grids, as listed above. The whole series consists of more than 20 chapters, including nearly 18 theories and five cases, which take half a year. The whole series is illustrated with hundreds of images and hundreds of examples. In my opinion, this series is the most comprehensive and detailed introduction to CSS grids on the web. I hope you found these tutorials helpful.