CODEWITHSUNDEEP
htmlcsscss-grid
Arshad Arsal
Arshad Arsal

Reputation: 115

Align the last 2 items in middle css Grid

I'm working with css grid. I'm new to this. I have 5 elements and 6 columns. But how to arrange the last 2 columns in center? Here is the code

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
<div class="points">
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
</div>

Example

See this image example

Upvotes: 1

Views: 703

Answers (3)

someone
someone

Reputation: 59

If you have to use grids, this is a way :)

.points {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1fr .5fr .5fr 1fr;
  justify-items: center;
  
}

.point-1 {
  grid-column: 1 / 2;
}
.point-2 {
  grid-column: 2 /4 
}
.point-4 {
  grid-column: 1 / 3;
  
}
.point-5 {
  grid-column: 3 / -1;
  
}
<div class="points">
      <div class="point point-1">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-2">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-3">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-4">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-5">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
    </div>

Here is the same in flex :) 

.points {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  
}
.point {
  flex-basis: 30%;
}
<div class="points">
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
    </div>

Upvotes: 0

Wimanicesir
Wimanicesir

Reputation: 5121

I don't know if this is the best solution.

But you could make two grids, one of 3 and one of 5. Use empty divs to fill up the first and middle cell of the 5 cell grid.

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

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

img {
 width: 50px;
 height: 50px
 }
 
 h2, h3 {
 text-align:center
 }
<div class="points3">
    <div class="point">
      <h2><img src="https://seeklogo.net/wp-content/uploads/2015/10/stack-overflow-logo-vector-download.jpg" alt=""></h2>
      <h3>Text</h3>
    </div>
    <div class="point">
      <h2><img src="https://seeklogo.net/wp-content/uploads/2015/10/stack-overflow-logo-vector-download.jpg" alt=""></h2>
      <h3>Text</h3>
    </div>
    <div class="point">
      <h2><img src="https://seeklogo.net/wp-content/uploads/2015/10/stack-overflow-logo-vector-download.jpg" alt=""></h2>
      <h3>Text</h3>
    </div>
  </div>
 <div class="points5">
 <div class="spacer"></div>
 
  <div class="point">
    <h2><img src="https://seeklogo.net/wp-content/uploads/2015/10/stack-overflow-logo-vector-download.jpg" alt=""></h2>
    <h3>Text</h3>
  </div>
 <div class="spacer"></div>
  
  <div class="point">
    <h2><img src="https://seeklogo.net/wp-content/uploads/2015/10/stack-overflow-logo-vector-download.jpg" alt=""></h2>
    <h3>Text</h3>
  </div>
  </div>
</div>

Upvotes: 1

evilgenious448
evilgenious448

Reputation: 528

There is an easy way to do this without using Grid as follows:

.points {
text-align: center;
}

.point {
display: inline-block;
background-color: green;
width: 100px;
height: 100px;
margin:30px; 
}
<div class="points">
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
</div>

Upvotes: 1

Related Questions