Kevin Powell - Community•3mo ago

Grid Template Areas

Hello, what should I do to insert 3 divs in the 3rd row? Should I just add 2 divs and then put diplsay grid on "other"???

    display: grid;
    grid-template-areas:
        "header header"
        "content sidebar"
        "other sidebar"
        "footer footer";

    display: grid;
    grid-template-areas:
        "header header"
        "content sidebar"
        "other sidebar"
        "footer footer";

Thanks

4 Replies

brrOP•3mo ago

coz this is giving me weird ui: "item1 item2 sidebar"

Chris Bolson•3mo ago

Could you define 3 columns in each row like this?

  display: grid;
    grid-template-areas:
        "header header header"
        "content conetnt sidebar"
        "item1 item2 sidebar"
        "footer footer footer";

  display: grid;
    grid-template-areas:
        "header header header"
        "content conetnt sidebar"
        "item1 item2 sidebar"
        "footer footer footer";

Jochem•3mo ago

yup, what Chris said. You can't have sparse rows in a grid, they have to be a full X by X grid with slots defined for each cell

curiousmissfox•3mo ago

What Chris and Jochem said but just want to also add that you can leave a cell empty by using a full stop

grid-template-areas:
  “one    one           .”
   “Two    three  Three”
   “Two    .                .” ;

grid-template-areas:
  “one    one           .”
   “Two    three  Three”
   “Two    .                .” ;

Can’t seem to get it to line up visually

Gaming

Programming

Grid Template Areas

Did you find this page helpful?