Arrange content in a grid like this:
<!-- grid -->
<div class="pacem-grid">
<div class="pacem-cell cols-start-5 cols-2 fill-green"></div>
</div>
.pacem-grid
must be the container css class, while.pacem-cell
children are the arranged dom cells.
Content arrangement can be made dependent on the screen size by using responsive css classes:
<!-- grid -->
<div class="pacem-grid">
<div class="pacem-cell cols-xl-start-5 cols-lg-start-4 cols-md-start-3 cols-xl-2 cols-lg-4 cols-md-6 fill-green"></div>
</div>
The thresholds relevant to the specfic screen widths:
xs
< 768px;sm
>= 768px;md
>= 992px;lg
>= 1200px;xl
>= 1824px;hd
>= 1920px;2k
>= 2048px;4k
>= 3840px;Grid system can leverage container queries and become responsive to container size instead of screen size.
<!-- container wrapper -->
<div class="pacem-container container-inline-size">
<!-- grid -->
<div class="pacem-grid grid-contained">
<div class="pacem-cell cols-start-5 cols-2 fill-green"></div>
</div>
</div>
To trigger container responsiveness instead of screen size responsiveness,
.pacem-grid
css class must be combined with.grid-contained
css class.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.