window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-63172957-1');
Sound
Awwwards
</html>
Created by potrace 1.16, written by Peter Selinger 2001-2019
Back to blog
HTML & CSS

Ultimate Guide to CSS Grid Layout (Part 2)

  1. Grid Lines
  2. Grid Line control (grid-row, grid-column, grid area)
  3. Naming Grid Lines (grid-template)

 

Grid Lines

Grid lines are lines that represent item position on the CSS Grid similar to the chessboard.

Each line, starting from the start of the track and in the direction of the grid, is numbered incrementally starting from 1. Please see the explanatory picture below.

 

Our starting point

Let’s see that on real-life examples and create a simple grid where each column is labelled with a letter.

 
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  color: #444;
}
<div class="wrapper"> 
 <div class="box a">A</div>
 <div class="box b">B</div>
 <div class="box c">C</div> 
 <div class="box d">D</div>
 <div class="box e">E</div> 
 <div class="box f">F</div> 
</div>

 

Grid Line control (grid-row and grid-column)

We can use line-based placement to control where and how items sit on the grid.
Let’s move element B to the right and bottom.

 .b {
     background:red;
     grid-column-start: 3; /* move B to start in last column */
     grid-column-end: 4;  /* move B to end in last column */
     grid-row-start: 2; /* move B to start in 2 row*/
     grid-row-end: 3; /* move B to end in 2 row*/
  }

With grid line-based placement you can also make grid items to span vertically or horizontally.

Let’s make element B to start in first and end in the last column.

 .b {
     background:red;
     grid-column-start: 1; /* all we need to do is change start position to 1 (column) */
     grid-column-end: 4;  
     grid-row-start: 2; 
     grid-row-end: 3; 
  }

Shorthand version (grid-column and grid-row)

The grid-column CSS shorthand property specifies a grid item’s size and location within a grid column specifying the inline-start and inline-end edge of its grid area.

grid-row is shorthand for grid-row-start and grid-row-end.

grid-column is shorthand for grid-column-start and grid-column-end.

Let’s modify our last example with a shorthand version:

 

  /* old version  */
 .b {
     background:red;
     grid-column-start: 1; 
     grid-column-end: 4;  
     grid-row-start: 2; 
     grid-row-end: 3; 
  }

 /* shorthand version */
 .b {
     background:red
     grid-column: 1/4; 
     grid-row: 2 /3;  
  }

Yep, as you see below it is exactly the same.

Shorthand version (grid-area)

We can achieve the same result as in example 2 and 3 declaring all four values with the grid-area property.

  /* old version  */
 .b {
     background:red;
     grid-column-start: 1; 
     grid-column-end: 4;  
     grid-row-start: 2; 
     grid-row-end: 3; 
   }

 /* shorthand version - grid-area */
 .b {
     background:red
     grid-area:  2 / 1 / 3 / 4 ;  
     /* row-start/column-start/row-end/column-end. */
   }

Naming Grid Lines (grid-template)

You can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties.

This time I’ll create the same grid using named lines.

.wrapper {
  display: grid;
  grid-template-columns: [first-col] 100px [second-col] 100px  [third-col] 100px [col-end];
  grid-template-rows:    [first-row] auto [second-row] auto  [third-row] auto [row-end];
}

.b {
  background:red
  grid-area:  second-row / first-col / second-row / col-end ;  
           /* row-start / column-start /row-end /column-end. */
}

Named lines are a vital feature of CSS Grid layout but true power lies in naming and positioning items by grid areas, which we describe in the next part.



Back to blog

</html>
Wordpress Developer Loader, Web Developer Loader , Front End Developer Loader Jack is thinking