I'm trying to align 5 input boxes in a 3x2 layout with CSS Flexbox. Three boxes should be on the first row and two boxes should be on the second row. I want every box to look the same with a width of 200px and be aligned with their corresponding box on the other row.

The boxes wrap exactly how I want it to at every breakpoint, but there's a small misalignment on the second box on the second row when it's around 600-700px upward. I don't want to use CSS Grid as a workaround. I've attached my work in the code snippet.

What would be causing that error, and how can I fix it? Thanks.

.my-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
}

.item {
  width: 200px;
}

.new-row {
  flex-basis: 100%;
  height: 0;
}

.spacer {
  width: 200px;
}

<div >
  <input ></input>
  <input ></input>
  <input ></input>
  <div ></div>
  <input ></input>
  <input ></input>
  <div ></div>
</div>

CodePudding user response：

What you're seeing is the default padding on input fields. I avoid this by just adding a universal selector *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } to the start of my document because I always set those attributes on my elements later on and if I don't I would rather the browser not try to do it for me. Also, <input> is self closing, you don't need the </input>

You could also set it specifically to the input if you want, input { padding: 0;} but input isn't the only element with defaults.

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.my-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
}

.item {
  width: 200px;
}

.new-row {
  flex-basis: 100%;
  height: 0;
}

.spacer {
  width: 200px;
}

<div >
  <input >
  <input >
  <input >
  <div ></div>
  <input >
  <input >
  <div ></div>
</div>

CodePudding user response：

• display:flex sets a flex-item next to each other, when flex-direction:row.
• flex:1 is shorthand property which will keep all child same size.
• You have used flex-wrap:wrap which is indeed need when wrapping overflowing flex child.
• Now I have use :nth-child selector for selecting first three child.
• .my-grid .item:nth-child(1) .my-grid .item:nth-child(2) .my-grid .item:nth-child(3).
• To set first two flex-item in first imaginery-row I have used flex:1 0 calc(33.33% - 2rem - 20px).

flex:1 0 calc(33.33% - 2rem - 20px) 33.33% because we need 3 species of 100% width, then - 2rem gap of 1 rem from both side 1rem 1rem. and - 20px because I have added padding:10px to .mygrid which is 10px left side and 10px right side so in total 20px.

.my-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
  padding: 10px;
}

.my-grid .item:nth-child(1),
.my-grid .item:nth-child(2),
.my-grid .item:nth-child(3) {
  flex: 1 0 calc(33.33% - 2rem - 20px);
}

.my-grid .item {
  flex: 1;
}

<div >
  <input ></input>
  <input ></input>
  <input ></input>
  <input ></input>
  <input ></input>
</div>