CSS GRID content everywhere except last column in first row

Question

Let's say there's a scenario where you have a grid with 3 columns and 2 rows, something like this:

<div class="wrapper">
  <div class="content"></div>
  <div class="info"></div>
</div>

Elements have these simple styles:

.wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 400px;
  grid-template-rows: 400px auto;
}

.content {
  grid-column: 1/4;
  grid-row: 1/3;
}

.info {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
}

This would fill the contents of .content element to the whole .wrapper available space and the .info element would be positioned absolute over in the right top corner.

Is it possible to display the contents of .content into everything except to top right cell - like this (red is where the content is):

@m4n0 I think it's red, but it's definitely more grey than it is red :) — corn on the cob, Oct 21 '20 at 19:20
Wait... I just found out the answer... it's pink! Light red! Hurrah! — corn on the cob, Oct 21 '20 at 19:21
are you okay with using tow sections for the content (L shaped part) — Binara Medawatta, Oct 24 '20 at 09:00

score 0 · Answer 1 · answered Jul 07 '23 at 16:37

I don't think this is possible using css grid. It would be roughly akin to this template-areas syntax:

grid-template-areas: "text square"
                     "text text";

Which is returned as invalid (demo in codepen):

However, this is basically the perfect use case for float which

places an element on the left or right side of its container, allowing text and inline elements to wrap around it

Demo in Stack Snippets & Codepen

.square {
  float: right;
  background: red;
  width: 50px;
  height: 50px;
  margin: 6px;
}

<div>
  <div class="square"></div>
  <div>Licks paws hunt anything that moves instead of drinking water from the cat bowl, make sure to steal water from the toilet or grass smells good. Human give me attention meow walk on a keyboard and i dreamt about fish yum! yet gnaw the corn cob chew on cable, eat a plant, kill a hand. Find something else more interesting love me! hopped up on catnip, for taco cat backwards spells taco cat or intently sniff hand, for catto munch salmono. Lick the other cats. Meowwww bite the neighbor's bratty kid bawl</div>
</div>

Alternatively, if you want to wrap around text in the bottom right, there's a clever solution on how can I wrap text around a bottom-right div? using shape-outside

CSS GRID content everywhere except last column in first row

1 Answers1

Demo in Stack Snippets & Codepen