1

I use css grid-template-areas, like this:

grid-template-areas:
  'sidebar tags'
  'sidebar categories';

It's working fine but I would like to add an empty element, kind of like this:

grid-template-areas:
  'EMPTY sidebar tags       EMPTY'
  'EMPTY sidebar categories EMPTY';

Is that possible? I know I can add an empty html element for it but I know that css grid in most cases are really smart when it comes to controlling things with css only.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas --> looks like you can use a full stop? – sol Aug 11 '17 at 07:56

1 Answers1

-2

The CSS Grid Specification includes the ability to add gutters between column and row tracks with the grid-column-gap and grid-row-gap properties. These specify a gap that acts much like the column-gap property in multi-column layout.

Gaps only appear between tracks of the grid, they do not add space to the top and bottom, left or right of the container. Therefore you could only uses these properties to create gaps in between existing template areas.

e.g.

grid-column-gap: 40px;
grid-row-gap: 2em;
Alex
  • 376
  • 1
  • 17