Rrjeti i blloqeve me gjerësi automatike në CSS

Në mësimin e mëparshëm, në rrjetin tonë rezultoi që gjerësia e elementeve dhe hapësirat e tyre duhet të mblidheshin për të dhënë gjerësinë e elementit prind. Kjo është pak jo universale. Le ta bëjmë që elementet të përshtaten automatikisht në gjerësinë e prindit.

Le të themi se kemi këtë element prind:

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

Le të themi se elementët e këtij rrjeti janë 4 blloqe në një rresht:

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

Le të caktojmë gjerësinë e blloqeve tona në mënyrë që secili prej tyre të zërë një të katërtën e prindit. Për këtë le të vendosim madhësinë e tyre në 25%:

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