Плочка со авто-ширина на блокови во 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;
}