Search code examples
csscss-grid

CSS Grid set number of columns for the top row only

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100px repeat(3, 1fr);
}

i want the first row to be only 2 columns which will be my navbar, logo and nav links but can't seem to find out how maybe cause im searching the wrong thing.

Solution

  • Use grid-column on your child elements

    On your grid child elements (your navbar, for example), you can use the grid-column property. You can set start and end values for where you want the child to be positioned.

    For example:

    .navbar {
  grid-column: 1 / 7;
}

    Next level: use grid-areas to label your child elements

    You might also want to consider looking into grid-areas, which is a nice way of labelling and referencing areas such as your header and navbar.

    References: