使用网格布局-HTML将框均匀地水平放置

Question

Basically I have this code:

 .flex-container6 { margin-left: 20%; margin-right: 20%; margin-top: 125px; font-family: Archivo Narrow Regular; font-size: 33px; color: #fff; text-align: center; background: #EEE; } 

 <div class="flex-container6"> <div class="wrapper"> <div id="firstt">1</div> <div id="firstt2">2</div> <div id="firstt3">3</div> </div> </div> 

I gave the biggest box margins which are correct, now I'm trying to make these 3 separate boxes in the big box with 20% margins be aligned evenly horizontally. This means: Box 1 will be against left side of 20% margin and box 3 at the right side with 2nd box in the middle.

Thank you for your time!

Answer 1

In your class .wrapper , you can use the flexbox system, that's quit simple. Take a look and let me know if that's what you needed.

 .flex-container6 { margin-left: 20%; margin-right: 20%; margin-top: 125px; font-family: Archivo Narrow Regular; font-size: 33px; text-align: center; } .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } 

 <div class="flex-container6"> <div class="wrapper"> <div id="firstt">1</div> <div id="firstt2">2</div> <div id="firstt3">3</div> </div> </div> 

Answer 2

You should have the css for wrapper class like this,

.wrapper {
  display: flex;
  flex-direction: row;
  margin-left: 20%;
  justify-content: space-between;
}

Adding margin-left in the wrapper class will push the first child to left (20% in this case). Then adding justify-content: space-between will spread the children in available width. This will make sure that there is same gap between 1-2 and 2-3.

Answer 3

You can use CSS grid:

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

You can then use grid-gap to control the gap between the grid items.

See https://css-tricks.com/snippets/css/complete-guide-grid/ for more information on CSS grid.

Answer 4

It's very simple, You need to add just below .wrapper css. It's the most easiest and efficient way to achieve this using display: grid;

grid-template-columns: repeat(3, 1fr);

above property will make the grid area of 3 fractions and give equal width of 1 out of 3 fraction to each child grid elements. Also use grid-column-gap: 10%; to give 10% margin from both sides. Total 20%.

 .flex-container6 { margin-left: 20%; margin-right: 20%; margin-top: 125px; font-family: Archivo Narrow Regular; font-size: 33px; color: #000; text-align: center; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-column-gap: 10%; } .wrapper>div { background: #EEE; } 

 <div class="flex-container6"> <div class="wrapper"> <div id="firstt">1</div> <div id="firstt2">2</div> <div id="firstt3">3</div> </div> </div>