The Flex Box layout included in CSS3 is a great convenience for front-end developers, and it’s clear how powerful it is. Many layouts that previously required review code are now easily implemented with Flex Box. A more powerful Layout system is being discussed in the next version of the CSS specification, which is today’s CSS Grid Layout.

CSS Grid layout is a very powerful layout system in CSS. This is a two-dimensional system, meaning it can handle columns and rows at the same time, unlike the Flex Box, which is a one-dimensional system. You can use grid layouts by applying CSS rules to parent elements (which become grid containers) and children of that element (which become grid objects).

Browser Support

As a CSS module specification under discussion, there are still few browsers supported. To use it directly, you need to use IE11 (which supports the older specification), Microsoft Edge, Google Chrome Canary, or Firefox Nightly to see the effect.

CSS Grid Layout support browser

The easiest way to do this is to run Chrome ://flags/#enable-experimental-web-platform-features in Chrome.

What is a grid?

A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid. We can place grid elements at locations associated with these rows and columns. CSS grid layout has the following characteristics:

  • Fixed or flexible track dimensions

    You can create grids with fixed track dimensions, such as pixels. You can also create a grid with elastic dimensions using such as percentages or new units fr created specifically for this purpose.

  • Localization project

    You can use line numbers, line names, or calibrate a grid area to pinpoint items. The grid also uses an algorithm to control items that do not give an explicit grid location.

  • Create additional tracks to hold content

    An explicit grid can be defined using a grid layout, but the specification also addresses additional additions to the declaration net, such as the need to add additional rows and columns. Includes the ability to add “as many columns as possible to fit the container.”

  • Alignment control

    The grid includes alignment features so that we can control the alignment of objects once placed into the grid area and how the entire grid aligns.

  • Control overlapping content

    Multiple items can be placed in grid cells, or areas can partially overlap one another. You can then use this layering to control the Z-index.

The graph above shows a basic Grid. 1 represents Grid lines, 2 represents Grid tracks, which are essentially equivalent to rows and columns, and 4 represents Grid cells.

The grid based

Grid containers

Create a grid container by declaring display: grid or display: inline-grid on the element. Create a container with five elements inside a div element named Grid.

    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div>One</div>
    3. 
     
  3.    <div>Two</div>
    4. 
     
  4.    <div>Three</div>
    5. 
     
  5.    <div>Four</div>
    6. 
     
  6.    <div>Five</div>
    7. 
     
  7. </div>
    8.

Use.grid as a grid container

    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3. }
    4.

All direct descendant elements are now grid items. In the browser, you don’t see any difference until the projects are converted to the grid, because the grid creates a single-column grid for the projects.

The grid orbit

Rows and columns in the grid are defined by grid-template-columns and grid-template-rows attributes. These properties define the tracks of the grid. A grid track is the space between any two lines in a grid.

Add a column track by adding the grid-template-columns attribute, and then define the size of the column track.

    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div>One</div>
    3. 
     
  3.    <div>Two</div>
    4. 
     
  4.    <div>Three</div>
    5. 
     
  5.    <div>Four</div>
    6. 
     
  6.    <div>Five</div>
    7. 
     
  7. </div>
    8. 
    
    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3. The grid - the template - the columns: 33.33% 33.33% 33.33%;
    4. 
     
  4. }
    5.

Now you create a grid that contains three column tracks, each one-third the width of the parent element. Subprojects will expand in each grid cell on the grid.

  • Fr unit grid tracks can be defined using any unit of length. The grid also introduces an additional unit of length to help us create flexible grid tracks. The new FR unit represents an equal portion of the available space in the grid container.

    Space can be proportionally divided by FR, similar to Flex Box’s Flex

          
      
       
    1. <div class="grid">
      2. 
       
    2.  <div>One</div>
      3. 
       
    3.  <div>Two</div>
      4. 
       
    4.  <div>Three</div>
      5. 
       
    5.  <div>Four</div>
      6. 
       
    6.  <div>Five</div>
      7. 
       
    7. </div>
      8. 
      
          
      
       
    1.   .grid {
      2. 
       
    2.     display: grid;
      3. 
       
    3.     grid-template-columns: 2fr 3fr 4fr;
      4. 
       
    4.   }
      5.

    Fr can also be mixed with ordinary values

          
      
       
    1. .grid {
      2. 
       
    2.     display: grid;
      3. 
       
    3.     grid-template-columns: 70px 2fr 3fr;
      4. 
       
    4. }
      5.

  • Large grids with multiple tracks can use the repeat() tag to repeat part or the entire track list.

    Such as:

          
      
       
    1. .grid {
      2. 
       
    2.     display: grid;
      3. 
       
    3.     grid-template-columns: 1fr 1fr 1fr;
      4. 
       
    4. }
      5.

    It can be written as:

          
      
       
    1. .grid {
      2. 
       
    2.    display: grid;
      3. 
       
    3.    grid-template-columns: repeat(3, 1fr);
      4. 
       
    4. }
      5.

    Repeat () can repeat only part of the track:

          
      
       
    1. .grid {
      2. 
       
    2. display: grid;
      3. 
       
    3. /* grid-template-columns: repeat(3, 1fr); * /
      4. 
       
    4. grid-template-columns: 70px repeat(3, 100px) 20px;
      5. 
       
    5. }
      6.

    You can also create a list of repeated tracks in multi-track mode:

          
      
       
    1. .grid {
      2. 
       
    2. display: grid;
      3. 
       
    3. /* grid-template-columns: repeat(3, 1fr); * /
      4. 
       
    4. /*grid-template-columns: 70px repeat(3, 100px) 20px; * /
      5. 
       
    5. grid-template-columns: repeat(3, 70px 2fr);
      6. 
       
    6. }
      7.

  • Explicit grids are the rows and columns that we explicitly define in grid-template-columns and grid-template-rows properties. An implicit grid is a grid that automatically creates rows and columns based on the content. By default, these tracks are automatically sized, changing their size based on the content inside them.

    We can use grid-auto-rows and grid-auto-columns to define the size of the implicit grid as follows:

          
      
       
    1.   <div class="grid">
      2. 
       
    2.      <div>One</div>
      3. 
       
    3.      <div>Two</div>
      4. 
       
    4.      <div>Three</div>
      5. 
       
    5.      <div>Four</div>
      6. 
       
    6.      <div>Five</div>
      7. 
       
    7.   </div>
      8. 
      
          
      
       
    1.   .grid {
      2. 
       
    2.       display: grid;
      3. 
       
    3.       grid-template-columns: 2fr 3fr 4fr;
      4. 
       
    4. grid-auto-rows: 100px; // The default grid row height will be 100px;
      5. 
       
    5.   }
      6.

  • Minmax () Minmax () is used to control the maximum and minimum mesh sizes.

    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div>One</div>
    3. 
     
  3.    <div>Two</div>
    4. 
     
  4.    <div>Three
    5. 
     
  5. <p class='height'> height: 140px; </p>
    6. 
     
  6.     </div>
    7. 
     
  7.    <div>Four</div>
    8. 
     
  8.    <div>Five</div>
    9. 
     
  9.    <div>Sixe</div>
    10. 
     
  10. </div>
    11. 
    
    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3.   grid-template-columns: 2fr 3fr 4fr;
    4. 
     
  4.   grid-auto-rows: minmax(100px, auto);;
    5. 
     
  5. }
    6.

Grid lines

When we create the grid, the grid numbers the grid lines so that we can locate each grid item by the grid line. The order in which grid lines are numbered depends on the writing pattern of the article. In languages written from left to right, the grid line numbered 1 is at the far left. In languages written from right to left, the grid line numbered 1 is at the far right.

When we define a grid, we define a grid track, not a grid line.

  • Place grid items across tracks

    When placing elements, we useGrid linesPositioning, notThe grid orbit.

    To place grid items across tracks (sort of like table merge cells), we need grid-column-start, grid-column-end, grid-row-start, and grid-row-end attributes. Here’s an example:
    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div class='one'>One</div>
    3. 
     
  3.    <div class='two'>Two</div>
    4. 
     
  4.    <div>Three</div>
    5. 
     
  5.    <div>Four</div>
    6. 
     
  6.    <div>Five</div>
    7. 
     
  7.    <div>Sixe</div>
    8. 
     
  8. </div>
    9. 
    
    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3.   grid-template-columns: 2fr 3fr 4fr;
    4. 
     
  4.   grid-auto-rows: 100px;
    5. 
     
  5. }
    6. 
     
    7. 
     
  7. .one { 
    8. 
     
  8.     grid-column-start: 1; 
    9. 
     
  9.     grid-column-end: 4; 
    10. 
     
  10.     grid-row-start: 1; 
    11. 
     
  11.     grid-row-end: 3; 
    12. 
     
  12. }
    13. 
     
    14. 
     
  14. .two { 
    15. 
     
  15.     grid-column-start: 1; 
    16. 
     
  16.     grid-row-start: 3; 
    17. 
     
  17.     grid-row-end: 5; 
    18. 
     
  18. }
    19.

Grid cell

A grid cell is the smallest unit in a grid element and is conceptually similar to a cell in a table. Once a grid element is defined in a parent element, its child items are arranged in each predefined grid cell.

The grid area

Grid projects can extend one or more cells in a row or column direction and create a grid region. The shape of the grid area should be a rectangle – that is, you cannot create a grid area that looks like an “L” shape. The grid area highlighted below extends by 2 columns and 2 rows.

Photo by: MSDN

The grid spacing

Sometimes we need to set spacing between two cells. This can be set using grid-column-gap and grid-row-gap properties, or simply using the two combined abbreviations grid-gap.

    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div class='one'>One</div>
    3. 
     
  3.    <div class='two'>Two</div>
    4. 
     
  4.    <div>Three</div>
    5. 
     
  5.    <div>Four</div>
    6. 
     
  6.    <div>Five</div>
    7. 
     
  7.    <div>Sixe</div>
    8. 
     
  8. </div>
    9. 
    
    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3.   grid-template-columns: 2fr 3fr 4fr;
    4. 
     
  4.   grid-auto-rows: 100px;
    5. 
     
  5.   /*grid-column-gap: 10px;
    6. 
     
  6. grid-row-gap: 20px; * /
    7. 
     
  7.   grid-gap: 10px 20px;
    8. 
     
  8. }
    9.

The grid order

Use the Z-index attribute to control the order of grid items when they pile up.

    
    
     
  1. <div class="grid">
    2. 
     
  2.    <div class='one'>One</div>
    3. 
     
  3.    <div class='two'>Two</div>
    4. 
     
  4.    <div>Three</div>
    5. 
     
  5.    <div>Four</div>
    6. 
     
  6.    <div>Five</div>
    7. 
     
  7.    <div>Sixe</div>
    8. 
     
  8. </div>
    9. 
    
    
    
     
  1. .grid {
    2. 
     
  2.   display: grid;
    3. 
     
  3.   grid-template-columns: 2fr 3fr 4fr;
    4. 
     
  4.   grid-auto-rows: 100px;
    5. 
     
  5.   grid-gap: 10px 20px;
    6. 
     
  6. }
    7. 
     
    8. 
     
  8. .one { 
    9. 
     
  9.     grid-column-start: 1; 
    10. 
     
  10.     grid-column-end: 4; 
    11. 
     
  11.     grid-row-start: 1; 
    12. 
     
  12.     grid-row-end: 3;
    13. 
     
  13.     z-index: 2;
    14. 
     
  14.     background-color: #1e4c27;
    15. 
     
  15. Opacity: 0.8;
    16. 
     
  16. }
    17. 
     
    18. 
     
  18. .two { 
    19. 
     
  19.     grid-column-start: 1;
    20. 
     
  20.     grid-row-start: 2;
    21. 
     
  21.     grid-row-end: 5;
    22. 
     
  22.     z-index: 1;
    23. 
     
  23. }
    24.

conclusion

This is just the basics of grid layout, but it’s enough to show how powerful it can be. When it is really incorporated into the specification, it will certainly bring great improvement to the efficiency of front-end development.

Unless otherwise noted, all articles are original.

Reprint please indicate the source: www.liayal.com/article/5a9…