How to skip columns in row in grid layout

Question

Actually I was trying to use the w3schools code to create a grid layout and below is my code

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  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>

Now for above code 7th is my last element so I want it to show in the middle/center. and for its left and right side no element should be displayed

How can Iachieve this

score 4 · Accepted Answer · answered Sep 13 '22 at 09:49

You can combine the :last-child selector with grid-column to define which column the last element is placed in:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  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;
}

.grid-item:last-child {
  grid-column: 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>

yes this one is what I want to achieve. Thank you Dan Carter. can you please upvote my question if it is right ? — John, Sep 13 '22 at 10:15

score 0 · Answer 2 · answered Sep 13 '22 at 09:52

In case you want the last item to span over the entire row, you can use grid-column-end: span 3; on you last .grid-item element:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  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;
}

.grid-item:last-child {
  grid-column-end: span 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">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

hi but I want 7 size and border should remain same – John Sep 13 '22 at 09:55 — John, Sep 13 '22 at 09:55
ok then, Dan Carter's answer is the right one – GrafiCode Sep 13 '22 at 10:02 — GrafiCode, Sep 13 '22 at 10:02

How to skip columns in row in grid layout

2 Answers2