CODEWITHSUNDEEP
htmlcss
GeorgeButter
GeorgeButter

Reputation: 2589

Aligning horizontal borders across a grid

I am using something similar to css wizardry grids. I am trying to align horizontal borders across seperate grid items. The image at the top is always the same size. For the most part the seperate borders line up However because the grid works in percentages that are finer than a pixel, at some screen sizes the borders dis-align (see Blog Article 3 below).

I can't just use a <hr> because on smaller screensizes the grid condenses to to on a row and then one on a row. I need a responsive solution that doesn't use javascript. I don't necessarily need a code example of how to do this but an approach.

enter image description here

Upvotes: 0

Views: 50

Answers (1)

Geeky
Geeky

Reputation: 7496

You can consider display:flex

.container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.container .item {
  background: green;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.bb {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
  padding: 10px;
  border-bottom: 1px solid black;
  margin-top: 20px;
  width: 50%;
}
<div class="container">

  <div class="item"></div>

  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="bb">
  <div>
    item1
  </div>
  <div>
    item2
  </div>
  <div>
    item3
  </div>
</div>

Hope this helps

Upvotes: 1

Related Questions