Positioning items in your grid

Using grid-column and grid-row

header

menu

content

footer

  1. Once your grid is create you maybe want to positioning some elements in a diferent order, in css grid it's very easy to move the elements in our grid here is the first solution.
  2. To move our elements we will use grid-column and grid-row.
  3. The method grid-column is a shorthand for grid-column-start and grid-column-end who takes two parameters, the first define where the element should start and the second where he should end on the column line.
  4. It works exactly the same for grid-row.
  5. In our css file it should be for the div.header grid-column: 2 / -1 and grid-row: 1 / 2.
  6. Some explanations on the command above, we call our element div.header then we try to place our element after the div.menu so on the column line with grid-column we will indicate 2 for for the second column and -1 who define the last column of our grid this is helpful when you don't know exactly how many columns you have in your grid, it's the same process for grid-row.