CODEWITHSUNDEEP
csscss-grid
Jackal
Jackal

Reputation: 3521

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.

Upvotes: 0

Views: 38

Answers (1)

chicgeek
chicgeek

Reputation: 506

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:

Upvotes: 1

Related Questions