CODEWITHSUNDEEP
htmlcsscss-grid
andi arizal
andi arizal

Reputation: 25

Grid Items Positioning

I need help on grid position of 5 items on a 2 rows [three on first row, plus two on second row]. I need the second row to be centered so it appeared more or less like

[x]..[x]..[x]

...[x]..[x]...

My work so far is this: My HTML/CSS layout

However, my aim is to center the second row to the center, as in: My reference that I want to follow

.month-teas-container {
  display: inline-block;
  width: 1000px;
  justify-content: center;
  margin: 100px;
}

.month-teas-contentez {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 50px;
}

.content img {
  width: 300px;
  height: 200px;
}
<div class="month-teas-container">
  <div class="month-texts">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="month-teas-contentez">
    <div class="content">
      <img src="resources\berryblitz.jpg" alt="Fall Berry Blitz Tea">
      <h4>Fall Berry Blitz Tea</h4>
    </div>
    <div class="content">
      <img src="resources\spicedRum.jpg" alt="Spiced Rum Tea">
      <h4>Spiced Rum Tea</h4>
    </div>
    <div class="content">
      <img src="resources\donut.jpg" alt="Seasonal Donuts">
      <h4>Seasonal Donuts</h4>
    </div>
    <div class="content">
      <img src="resources\myrtle.jpg" alt="Myrtle Ave Tea">
      <h4>Myrtle Ave Tea</h4>
    </div>
    <div class="content">
      <img src="resources\bedford.webp" alt="Bedford Bizzare Tea">
      <h4>Bedford Bizzare Tea</h4>
    </div>
  </div>
</div>

Any workaround/solution that you guys can provide considering I want to use grid?

Upvotes: 2

Views: 63

Answers (1)

Paulie_D
Paulie_D

Reputation: 115361

Use a 6 column grid not a 3 column then offset the 4th item.

.wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5em;
  padding: .5em;
}

.item {
  height: 100px;
  border: 1px solid grey;
  grid-column: span 2;
}

.item:nth-child(4) {
  grid-column: 2 / span 2;
}
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 2

Related Questions