CODEWITHSUNDEEP
cssflexboxcss-grid
Dev
Dev

Reputation: 385

CSS grid - align two rows with different number of columns

I have a question related to CSS grid. Let's say I have 2 rows:

First row:

<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

Second row:

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class"SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col 4</span>
  </div>

</div>

How can I split the last div element in second row so the content from the first row is perfectly aligned with content from the second one(like if they were identical rows by structure).

CCS That I used:

.first-row {
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

Upvotes: 0

Views: 2338

Answers (2)

Egor Sanko
Egor Sanko

Reputation: 56

I would implement what is called 'Subgrid' or 'Grid level 2'.

While the container that has both of your initial rows inside is defined in CSS using 'display: grid;', define your 'SPLIT-THIS' with a separate 'display: grid;'. Then, use 'grid-template-rows: 50%, 50%;' for 'SPLIT-THIS' as well.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105863

  • First option / approach : both container would need to have the same amount of column and same size to be matching visually.

The split element then needs to be spanning 2 columns and be itself a grid container .

.first-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.second-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.SPLIT-THIS {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

div,
.SPLIT-THIS span {
  box-shadow: inset 0 0 0 1px
}
<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>

  • Other options is to redefine the grid-column templates if you wish only 3 col

.first-row {
  display:grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
  display:grid;
   grid-template-columns: 1fr 1fr 2fr ;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.SPLIT-THIS{
   display:grid;
  grid-template-columns:repeat(2,1fr);
}
div, .SPLIT-THIS span {box-shadow:inset 0 0 0 1px}
<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>

Upvotes: 1

Related Questions