CODEWITHSUNDEEP
csscss-grid
roye7777777
roye7777777

Reputation: 418

Is there a shorter way of defining grid-template-areas?

Defining areas makes setting up a CSS grid a lot easier. One defines a grid-area for each item that will be in the grid, and then one adds that area to grid-template-areas. When one has a rather complex setup for a grid, one needs to put all the grid-areas in grid-template-areas like this:

grid-template-areas: 
    "header header header header header header"
    "aside aside content content content content"
    "box1 box1 box1 box2 box3 box3"
    "box4 box5 box5 box6 box6 box6";

This might be a totally ignorant question, but is there a way to use something like repeat(6, header) or so that would shorten up the way when defining a complex area structure like this? Within a string, that's not going to work, as a group of strings is what grid-template-areas expects.

I know one can accomplish a comparable behavior with grid-template-columns, as shown here, where one can define a few areas, to then repeat these over a matching amount of fractional units (fr), but a structure like this wouldn't be applicable in my case, as my grid here is too complex to apply this to, or is it?

In SASS, one can loop through a variable, but I don't think that could be a way to go, would it?

Upvotes: 2

Views: 1797

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371909

Using plain CSS, the answer is no. You need to lay it all out.

The grid-template-areas property is designed to provide a visual structure of the grid. That's why it exists. Any shortcuts would defy its purpose.

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

The syntax of the grid-template-areas property provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

§ 7.4. Explicit Grid Shorthand: the grid-template property property

Note that the repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

Here's grid-template-areas in one of my websites:

enter image description here

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273807

One idea of optimization is to define a range, so instead of having:

header header header header header header

you do

header-s . . . . header-e

The you consider grid-column:header-s/header-e. You will at least reduce the redundancy.

.box  {
 display:grid;
 grid-gap:5px;
 border:1px solid;
  grid-template-areas: 
    "header-s . . . . header-e"
    "aside aside content-s . . content-e"
    "box1-s . box1-e box2 box3 box3"
    "box4 box5 box5 box6-s . box6-e";
 }
 .box > div:first-child {
   height:50px;
   background:red;
   grid-column:header-s/header-e;
   grid-row:1;
 }
 .box > div:nth-child(2) {
   height:50px;
   background:green;
   grid-column:box1-s/box1-e
 }
 
 .box > div:nth-child(3) {
   height:50px;
   background:blue;
   grid-area:box2
 }
  .box > div:nth-child(4) {
   height:50px;
   background:orange;
   grid-area:box3
 }
   .box > div:nth-child(5) {
   height:50px;
   background:purple;
   grid-column:box6-s/box6-e;
   grid-row:4;
 }
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Upvotes: 2

Related Questions