Learning how UIkit implements grids

UIkit describes itself as a lightweight and modular CSS framework for developing fast and powerful web interfaces. UIkit is developed by the people at YOOtheme, a Hamburg-based company that specializes in developing themes for WordPress and Joomla. Since the initial release of UIkit 3 in January 2017, it has received regular updates and is currently on version 3.16, as of February 2023.

We can see the landing page of UIkit’s website in the following screenshot:

Figure 8.11 – UIkit’s landing page

UIkit takes a drastically different approach to defining grids. Its usage of JS and attribute selectors allow us to build a grid with attributes defined on the container. To mark an element as a grid container, we apply the uk-grid attribute to the element:

<div uk-grid>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  ...