Grid areas not laying out properly in CSS Grid

by

When using the grid-template-areas property, string values must have the same number of columns.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

You can use a period, or an unbroken line of periods, to represent an empty cell (spec reference).

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" " ... about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

From the Grid spec:

7.3. Named Areas: the grid-template-areas
property

All strings must have the same number of columns, or else the declaration is invalid.

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Non-rectangular or disconnected regions may be permitted in a future version of this module.

Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).

More Related Contents:

  1. CSS-only masonry layout
  2. Flex / Grid layouts not working on button or fieldset elements
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Make grid container fill columns not rows
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. minmax() defaulting to max
  10. Preventing double borders in CSS Grid
  11. Why is my Grid element’s height not being calculated correctly?
  12. Why display grid with 100% in grid-template-columns goes out of body?
  13. Make row stretch across all columns in CSS Grid
  14. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  15. How to make images stay within the rows of a css grid container?
  16. Understanding grid negative values
  17. grid-auto-flow in snake lines?
  18. CSS grid wrapping
  19. How can I create a row-based masonry layout using CSS?
  20. Items that span all columns/rows using CSS grid layout
  21. Change the column order in a css grid
  22. How can I target a specific column or row in a CSS grid layout?
  23. How to make CSS Grid items take up remaining space?
  24. sticky position on css grid items
  25. How to flatten nested divs to display them in a CSS grid?
  26. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  27. What are the default values for justify-content & align content?
  28. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  29. How to calc() the number of rows in a grid template?
  30. CSS Grid Row Height Safari Bug

Leave a Comment