Modern CSS has so many new features that we might not have enough time to learn them all. Therefore, I am considering creating a series of practical modern CSS tips that can help you accomplish tasks with less and cleaner code, covering the concise syntax of popular utility CSS frameworks like Tailwind CSS or UnoCSS.

This article mainly focuses on the most common requirement - page layout.

Centering

Centering elements is perhaps the most common requirement in web design, and there are multiple ways to achieve it. Here is one of the simplest methods I recommend:

As illustrated, we can use place-items to quickly center elements. This is actually a shorthand for align-items and justify-items. In other words:

div.parent {
  display: grid;
  align-items: center;
  justify-items: center;
}

This achieves the same effect. Additionally, you can set it on the child element:

div.parent {
  display: grid;
}

div.child {
  align-self: center;
  justify-self: center;
}

Of course, we can also use flexbox layout:

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

However, there might be special scenarios where you need to always center a single element. In this case, you can use:

div.parent {
  position: relative;
}

div.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

The Holy Grail Layout

The Holy Grail layout is a popular design pattern that includes a header, footer, two sidebars, and a main content area. This layout can be easily achieved with the grid-template property: grid-template: auto 1fr auto / auto 1fr auto.

<div class="grid grid-rows-[auto_1fr_auto] h-full w-full">
  <header class="bg-yellow-200">Header</header>

  <main class="grid grid-cols-[auto_1fr_auto]">
    <div class="bg-blue-200">Left</div>
    <div class="text-center bg-green-200">Main</div>
    <div class="bg-red-200">Right</div>
  </main>

  <footer class="bg-pink-200">Footer</footer>
</div>

Grid Layouts with Minmax

The minmax function is a useful tool for creating responsive grid layouts. For instance, a sidebar that stretches out to 25% of the screen on larger screens but has a minimum size of 200px can be achieved with grid-template-columns: minmax(200px, 25%).

Subscribe to Premium to read the rest.