- Web Developer
- Posts
- Modern CSS - Layout Guide
Modern CSS - Layout Guide
Quickly learn modern layout techniques and how to implement them easily with Tailwind CSS.
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
.
Reply