Make grid area span two rows, but not two columns

Question

I've been trying to create a layout that looks like this:

This is the code:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

You can fake such a shape with the float properties and draw somehow, borders via box-shadow . here is an old pen of mine https://codepen.io/gc-nomade/pen/HKEpo and a variant, https://codepen.io/gc-nomade/details/jmsoB *(not the best design ;) )* — G-Cyrillus, Apr 13 '19 at 21:11

Michael Benjamin · Answer 1 · 2019-04-13T19:02:54.403

Here's the main problem:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"  <--- problem
                       "main main";  <--- problem
}

You can only set rectangular grid areas with grid-template-areas.

Tetris-like shapes are invalid (at least in the current version of CSS Grid, which is Level 1).

However, maybe you can use Grid's line-based placement technique to achieve your layout:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-auto-rows: 50px;
}

.wrapper > aside {
  grid-row: 1;
  grid-column: 2;
  z-index: 1;
  border: 2px solid blue;
}

.wrapper > main {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  border: 2px solid red;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

More details:

score 0 · Accepted Answer · answered Apr 13 '19 at 21:30

not really an answer but for the fun and to remenber & to show that the behavior of floatting elements can be used to fake such a shaped layout.

Float is not obsolete and can once be still usefull even if display has become very good. so here is from my comment and an old pen an example looking close to your grid.

It is about https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

demo below

/* my grid not flexible enough ...

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

*/
/* back to the past */
.wrapper {
  overflow: hidden;/* to keep float inside */
}

.wrapper aside {
  float: right;
  width: 300px;
}


/*makup*/
.wrapper {
  box-shadow: 0 0 0 3px inset red;
}
.wrapper aside {
  padding: 1em;
  border: solid;
  box-shadow: 0 0 0 3px white, 0 0 0 6px red;
  margin: 0 0 1.5em 1em;
}

main {
  padding: 1em;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

to let content of main flow under aside, remember that you are dealing with float, do not reset display or oveflow to main to keep it this way , read about block formatting context.

Make grid area span two rows, but not two columns

2 Answers2