Плочки с автоматична ширина на блоковете в CSS

В предишния урок в нашата плочка се получаваше така, че ширината на елементите и техните отстъпи в сума трябваше да дават ширината на родителя. Това е малко не универсално. Нека направим така, че елементите автоматично да се подстройват под ширината на родителя.

Нека имаме такъв родител:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

Нека елементите на тази плочка са по 4 блока в ред:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Задайте ширината на нашите блокове така, че всеки от тях да заема четвърт от родителя. За това поставете техния размер на 25%:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}