![Simple, Responsive CSS Grid Page Layout](https://optimise2.assets-servd.host/gratis-creeper/staging/blog/027_0U0A1900.jpg?w=3500&h=2333&auto=compress%2Cformat&fit=crop&dm=1708017321&s=4125b602d9afb7213ffce74e8944659d)
I’ve laid pages out many difÂferÂent ways, but my favorite is using CSS grid along with a few othÂer tricks. The examÂple below is vanilÂla HTML/CSS; howÂevÂer, the conÂcept can be adaptÂed to any SPA framework.
Before going into the full examÂple, I’ll point out a few interÂestÂing tidbits.
body {
min-height: 100vh;
margin: 0;
display: grid;
}
This ensures the body occuÂpies the full screen height, allowÂing us to stick the page footÂer to the botÂtom if the conÂtent isn’t tall enough to push it offÂscreen. The vh
unit is ​“view height” and 100vh
means ​“100% of the view height.”
.app {
display: grid;
grid-template-rows:
[header-start]
min-content
[header-end content-start side-start]
1fr
[content-end side-end footer-start]
min-content
[footer-end];
grid-template-columns:
[header-start content-start footer-start]
auto
[content-end side-start]
300px
[side-end header-end footer-end];
}
The above sets up the page with a grid, namÂing each line of the grid (names fall niceÂly between the [ ]
brackÂets). In the full examÂple, you will see how we restrucÂture the grid through media queries. As long as all of our line names are present, the page will reflow seamÂlessÂly, offerÂing a clean entry point into high-levÂel, responÂsive design.
.header {
// ...
grid-row: header-start / header-end;
grid-column: header-start / header-end;
// ...
}
The above allows us to define what part of the grid the headÂer should occuÂpy using the named lines from the grid definition.
.header {
// ...
position: sticky;
top: 0;
// ...
}
The above approach allows the headÂer to remain at the top of the page when scrolling. You can choose a difÂferÂent valÂue for top to get it to stick to a difÂferÂent point. The benÂeÂfit of position: sticky
over fixed or absolute is that it allows the headÂer to conÂtinÂue to be a part of the layÂout of the grid. With someÂthing like position: fixed
you would need to add some top marÂgin to the conÂtent to comÂpenÂsate for the height of the headÂer. Less than ideal.
.content {
padding: 20px;
grid-row: content-start / content-end;
grid-column: content-start / content-end;
background: green;
display: grid;
grid-template-columns: repeat(auto-fill, 500px);
grid-template-rows: 300px;
grid-auto-columns: 500px;
grid-auto-rows: 300px;
grid-auto-flow: dense;
grid-row-gap: 20px;
grid-column-gap: 20px;
justify-content: center;
}
The above is simÂply a way to lay out the boxÂes to give the conÂtent the necÂesÂsary height.
And, finalÂly, the full examÂple is here.
Phone
Wide Screen
NarÂrow Screen
Looking for more like this?
Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.
![Why I use NextJS](https://optimise2.assets-servd.host/gratis-creeper/staging/blog/NextJS-Banner.jpg?w=696&h=320&q=75&auto=format&fit=crop&dm=1708017591&s=be0be4edee0531a290971080a86b2811)
Why I use NextJS
December 21, 2022Is NextJS right for your next project? In this post, David discusses three core functionalities that NextJS excels at, so that you can make a well-informed decision on your project’s major framework.
Read more![Simplifying the 4 forces of AI](https://optimise2.assets-servd.host/gratis-creeper/staging/blog/four-forces-of-ai-thumbnail.jpg?w=4500&h=4500&auto=compress%2Cformat&fit=crop&dm=1712676991&s=9046f12fb126e27a95d6b555859f86c9)
Simplifying the 4 forces of AI
April 9, 2024Artificial Intelligence (AI) is becoming more prevalent, but less understood. Through examples of organizations leading the charge in each of these areas, I hope to empower you to make better decisions for your enterprise and career.
Read more![Advanced Tailwind: Container Queries](https://optimise2.assets-servd.host/gratis-creeper/staging/blog/banner_2023-07-28-190954_vhsa.jpg?w=696&h=320&q=75&auto=format&fit=crop&dm=1708017435&s=f3161781a39c23295bbfcdd4b8e65868)
Advanced Tailwind: Container Queries
July 28, 2023Explore some advanced web layout techniques using Tailwind CSS framework
Read more