Flexbox и Grid
Утилиты для управления тем, как содержимое выравнивается и распределяется одновременно.
| Class | Styles |
|---|---|
place-content-center | place-content: center; |
place-content-center-safe | place-content: safe center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-end-safe | place-content: safe end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-baseline | place-content: baseline; |
place-content-stretch | place-content: stretch; |
Используйте place-content-center для размещения элементов в центре блочной оси:
<div class="grid h-48 grid-cols-2 place-content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-start для размещения элементов у начала блочной оси:
<div class="grid h-48 grid-cols-2 place-content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-end для размещения элементов у конца блочной оси:
<div class="grid h-48 grid-cols-2 place-content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-between для распределения элементов сетки вдоль блочной оси так, чтобы между каждой строкой на блочной оси было равное количество пространства:
<div class="grid h-48 grid-cols-2 place-content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-around для распределения элементов сетки так, чтобы вокруг каждой строки на блочной оси было равное количество пространства:
<div class="grid h-48 grid-cols-2 place-content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-evenly для распределения элементов сетки так, чтобы они были равномерно распределены на блочной оси:
<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Используйте place-content-stretch для растягивания элементов сетки вдоль их областей сетки на блочной оси:
<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Префикс a place-content утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grid place-content-start md:place-content-center ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.