CODEWITHSUNDEEP
css
AlphaX
AlphaX

Reputation: 661

How to keep same single columns separately repeated in CSS grid area

I have a 3 column css grid with 5 rows set up as follows:

enter image description here

Problem: I'm struggling to get row 4 be split in 3 columns via the grid area syntax

Note: I know this could be solved by assigning specific start and end points to each div, e.g. hero h1 to span across the columns, but I was wondering if there is a way to just do it neatly via the grid area set-up and names in the wrapper.

.sp-herowrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "heroh1 heroh1 heroh1"
  "heroh2 heroh2 heroh2"
  "heroh3 heroh3 heroh3"
  "herobenefits herobenefits herobenefits" /* not sure how to set this line up so its not spanning across but repeated 3x for the 3 columns. When I reduce it to only 1x herobenefits, it screws up the whole table */
  "herocta herocta herocta";
}
.sp-heroh1 {
  grid-area: heroh1;
  border: 1px solid black;
}
.sp-heroh2 {
  grid-area: heroh2;
  border: 1px solid purple;
}
.sp-heroh3 {
  grid-area: heroh3;
  border: 1px solid red;
}
.sp-herobenefits {
  grid-area: herobenefits;
  border: 1px solid blue;
}
.sp-herocta {
  grid-area: herocta;
  border: 1px solid green;
}
  <div class="sp-herowrapper">
<div class="sp-heroh1">hero h1</div>
<div class="sp-heroh2">hero h2</div>
<div class="sp-heroh3">hero h3</div>
<div class="sp-herobenefits">hero benefits </div>
<div class="sp-herocta">hero cta</div>
</div>

Upvotes: 0

Views: 125

Answers (1)

Temani Afif
Temani Afif

Reputation: 272816

The solution is to simply use a different name for each column. As you already noticed, using the same name means that the same area will use 3 columns.

.sp-herowrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "heroh1 heroh1 heroh1"
  "heroh2 heroh2 heroh2"
  "heroh3 heroh3 heroh3"
  "herobenefits1 herobenefits2 herobenefits3" 
  "herocta herocta herocta";
}
.sp-heroh1 {
  grid-area: heroh1;
  border: 1px solid black;
}
.sp-heroh2 {
  grid-area: heroh2;
  border: 1px solid purple;
}
.sp-heroh3 {
  grid-area: heroh3;
  border: 1px solid red;
}
.sp-herobenefits1 {
  grid-area: herobenefits1;
  border: 1px solid blue;
}
.sp-herobenefits2{
  grid-area: herobenefits2;
  border: 1px solid blue;
}
.sp-herobenefits3 {
  grid-area: herobenefits3;
  border: 1px solid blue;
}
.sp-herocta {
  grid-area: herocta;
  border: 1px solid green;
}
<div class="sp-herowrapper">
<div class="sp-heroh1">hero h1</div>
<div class="sp-heroh2">hero h2</div>
<div class="sp-heroh3">hero h3</div>
<div class="sp-herobenefits1">hero benefits </div>
<div class="sp-herobenefits2">hero benefits </div>
<div class="sp-herobenefits3">hero benefits </div>
<div class="sp-herocta">hero cta</div>
</div>

Upvotes: 1

Related Questions