Grid System

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.

Responsive

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;

Container Responsive

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.