Search code examples
htmlcssflexboxcss-grid

Children divs of a parent grid do not fill all the available space

I have this setup in which i need the form, the button and the select box to occupy all the availabe space horizontally. In small screen sizes all works as intended

small creen size

however when I test it in bigger screens all the space is not filled by the child elements bigger screen size

I tried both grid and flex->row approaches with the same result. How do i fix my code that even in bigger size the child elements fill all the available space horizontally with equal spaces between them?

.grand-parent {
  margin-top: 2%;
  left: 0%;
  position: relative;
  display: flex;
  flex-direction: row;
}

.parent {
  min-width: 395px;
  position: relative;
  /* display: flex;
  flex-direction: row; */
  display: grid;
  grid-template-columns: 1fr 1 fr 1fr;
  grid-auto-flow: column;
  padding-left: 5%;
  justify-content: space-between;

}

.child {
  background-color: blue;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: relative;
  font-size: 24px;
  align-self: center;

}
Solution

  • If you only have one row and want all children to be the same size, then the usual approach for me would be to use display: flex on the parent and flex-grow: 1; flex-basis: 0 on the children. No need for flex-direction: row. Also make sure that the parent is actually the width you expect, i.e. it also fills the whole width.