CSSда автоен блокларнинг кенглиги билан плитка

Олдинги дарста бизнинг плиткамизда элементларнинг кенглиги ва уларнинг ораликлари jамида ота-онанинг кенглигини берган бўлди. Бу бироз универсал эмас. Келинг, элементлар ота-онанинг кенглигига автоматник мослаша оладиган қилиб ясайлик.

Бизда мана бундай ота-она бор деб фараз қилайлик:

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;
}