CODEWITHSUNDEEP
htmlcsscss-grid
EugenSunic
EugenSunic

Reputation: 13733

Split css grid 2 columns into 3 for specific row

I have a 2 column layout and wish to split one row to a 3 column layout is that possible without specifying the 3 column layout initially?

Example

all 7s should be split to 3 parts in that row (see code output)

1 to 1.5 obviously doesn't work.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.custom {
  grid-column: 1/1.5
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>

Upvotes: 5

Views: 16233

Answers (1)

Temani Afif
Temani Afif

Reputation: 274384

A hack that should be used with caution (or not used at all)

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.custom {
  width: 66.66%
}

.custom+.custom {
  margin-left: -33.33%;
  grid-column: 2;
  grid-row:3;
}

.custom+.custom+.custom {
  margin-left: 33.33%;
  grid-column: 2;
  grid-row:3;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>

And the logical solution is to move to 6 columns:

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid-item {
  grid-column:span 3;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.custom {
 grid-column:span 2;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>

Upvotes: 5

Related Questions