CSS
Design Full-Height Sections with Flexbox or Grid
Effortlessly create hero sections or content blocks that occupy the entire viewport height using CSS Flexbox or Grid, improving visual impact and user experience.
/* Using Flexbox for a full-height section with centered content */
.full-height-flex-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Or height: 100vh; */
background-color: #e3f2fd;
text-align: center;
font-size: 2em;
color: #1a237e;
}
/* Using Grid for a full-height section (can also center content) */
.full-height-grid-section {
display: grid;
place-items: center; /* Centers content horizontally and vertically */
min-height: 100vh;
background-color: #e8f5e9;
text-align: center;
font-size: 2em;
color: #1b5e20;
}
How it works: This snippet demonstrates how to create sections that span the full height of the viewport. Both Flexbox and CSS Grid are effective for this. By applying `min-height: 100vh` (100% of viewport height) to the section, it will always be at least as tall as the screen. Flexbox with `display: flex`, `justify-content: center`, and `align-items: center` can additionally center content within this full-height section. Similarly, CSS Grid with `display: grid` and `place-items: center` offers a concise way to achieve both full height and centered content, making it ideal for hero sections or prominent content blocks.