Pločice sa automatskom širinom blokova u CSS-u

U prethodnoj lekciji, kod naših pločica se dešavalo da zbir širina elemenata i njihovih razmaka mora da bude jednak širini roditelja. To nije baš univerzalno. Hajde da napravimo tako da se elementi automatski prilagode širini roditelja.

Recimo da imamo ovakvog roditelja:

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

Neka elementi ove pločice budu po 4 bloka u redu:

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

Podesimo širinu naših blokova tako da svaki od njih zauzima četvrtinu roditelja. Za ovo postavićemo njihovu veličinu na 25%:

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