CODEWITHSUNDEEP
cssresponsive
user3213700
user3213700

Reputation: 159

Responsive centering of divs

How do I go from here

enter image description here

To here

enter image description here

I'm trying to center the inner div's to their parent except for the last row where I'd like to align it left to the row above it.

Here is the jsfiddle for the top image https://jsfiddle.net/L15p2nev

.container {
  text-align: center;
  background-color: green;
}

.item {
  display: inline-block;
  width: 300px;
  background-color: red;
}
<div class="container">
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Derek Wang
Derek Wang

Reputation: 10204

Using grid display layout, this can be archived.

You can set grid-template-columns: repeat(auto-fit, 300px) to align items as the image.

.container {
  background-color: green;
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  display: inline-block;
  background-color: red;
}
<div class="container">
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
</div>

Upvotes: 1

Related Questions