Center row in CSS Grids

Question

I'm creating a 4x3 grid layout and want the second row to be centered since the top row has four elements.

Something like this:

Demo code:

.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
  padding: 10px;
}
.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;
}

<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">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

Basically, **you can't** as a 4 column grid...what you have there **is not a GRID**. I'd use flexbox or perhaps try adapting a 8(?) column grid. — Paulie_D, Dec 13 '18 at 12:15

score 5 · Answer 1 · answered Dec 13 '18 at 12:19

Easy to do it with flex

and to center use justify-content: center; to set width use flex: 0 0 cala(20% - 40px);:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
  flex: 0 0 calc(20% - 40px);
padding: 20px;
margin: 5px;
}

<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">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

score 3 · Answer 2 · answered Dec 13 '18 at 12:20

An EIGHT column grid is actually what you are after.

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 50% 50%;
  padding: 10px;
  grid-gap: 4px;
}

.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;
  grid-column: span 2
}

.grid-item:nth-child(5) {
  grid-column: 2 / 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">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

Center row in CSS Grids

2 Answers2