CSS grid part 4 – Grid lines

Grid line numbers can be used to place content in any part of the grid. The start and end of each column and row is assigned a line number with 1 being at the top left corner. The numbers then run in sequence either across or down the page.

To set content position

Each content area can be given a start and end column number, and, if on more than one row, a row start and end number. As an example, shown below, to set the start and end position, use the parameter, grid-column 2/5 for columns and grid-row: 2/4. for rows . the first number is the start line the second number is the end line.

.one{
  grid-column: 2/5;
  grid-row: 2/4;
}

Grid lines layout example

In the example below each div is given a class and the line numbers are used to position each content area. Area five and six are reversed, the order of the markup can be overridden with CSS grid line numbers.

.one{
  grid-column: 1/3;
}
.two{
  grid-column: 3/7;
}
.three{
  grid-column: 1/4;
  grid-row: 2/4;
  }
 .four{
  grid-column: 4/7;
  grid-row: 2/4;
  }
  .five{
  grid-column: 3/7;
  }
  .six{
  grid-column: 1/3;
  grid-row: 4/5;
  }

Leave a Reply

Your email address will not be published. Required fields are marked *