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.

Subscribe to Premium to read the rest.