In the previous article, we discussed how CSS Flexbox and CSS Grid simplify responsive design by making layouts adaptable to different screen sizes. Now, let’s take things a step further and see how we can combine both Flexbox and Grid to create a personal website landing page.
This landing page will include:
- A header with navigation links.
- A main section with a profile photo, a short description, and social media links.
- A footer for copyright information.
We'll use CSS Grid to manage the overall structure and Flexbox to align the content inside specific sections. By combining both, we can create a modern, flexible, and fully responsive landing page. In this example, the focus is more on how CSS Grid and Flexbox can be used together, rather than on the design itself.
Why Combine Flexbox and Grid?
Flexbox and Grid each have their strengths:
- CSS Grid is perfect for handling the larger layout, dividing the page into sections like header, main content, and footer.
- Flexbox excels at aligning smaller items inside those sections, such as navigation links or buttons.
By using both, we can create a responsive layout that works well on any screen size.
Let's Code
Let's build a personal website landing page using both Grid and Flexbox. Here’s the full HTML and CSS code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header__title">John Doe</h1>
<nav class="header__nav">
<ul class="header__list">
<li><a href="#about" class="header__link">About</a></li>
<li><a href="#contact" class="header__link">Contact</a></li>
<li><a href="#projects" class="header__link">Projects</a></li>
</ul>
</nav>
</header>
<main class="main">
<section class="profile">
<img src="profile.jpg" alt="John Doe" class="profile__photo">
<div class="profile__info">
<h2 class="profile__name">John Doe</h2>
<p class="profile__bio">Web Developer with a passion for creating interactive and user-friendly websites.</p>
<div class="profile__social">
<a href="https://twitter.com" class="social__link">Twitter</a>
<a href="https://linkedin.com" class="social__link">LinkedIn</a>
<a href="https://github.com" class="social__link">GitHub</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<p class="footer__text">© 2024 John Doe - All Rights Reserved</p>
</footer>
</div>
</body>
</html>
CSS:
/* General Styles */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"main"
"footer";
height: 100vh; /* Full-page layout */
}
/* Header */
.header {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.header__title {
font-size: 36px;
margin: 0;
}
.header__nav {
margin-top: 10px;
}
.header__list {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
}
.header__link {
color: white;
text-decoration: none;
}
.header__link:hover {
text-decoration: underline;
}
/* Main */
.main {
grid-area: main;
display: flex;
justify-content: center;
align-items: center;
}
.profile {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.profile__photo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.profile__name {
font-size: 28px;
margin: 0;
}
.profile__bio {
font-size: 18px;
color: #666;
margin: 10px 0 20px;
}
.profile__social {
display: flex;
justify-content: center;
gap: 15px;
}
.social__link {
color: #333;
text-decoration: none;
font-size: 16px;
}
.social__link:hover {
text-decoration: underline;
}
/* Footer */
.footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.footer__text {
margin: 0;
}
How This Layout Works
Grid for Page Structure: We use CSS Grid to structure the page, dividing it into three main sections: header, main, and footer. The
grid-template-areasproperty ensures each section takes up the right amount of space.Flexbox for Alignment: Inside the header and main section, we use Flexbox to align elements like the navigation links and social media buttons. Flexbox makes it easy to center items both horizontally and vertically.
Responsive Design: This page will adapt well to different screen sizes. The Grid layout handles the overall page structure, while Flexbox ensures the content inside is spaced and aligned properly on any screen.
In this example, the focus is more on how CSS Grid and Flexbox can be used together, rather than on the design itself. The goal is to demonstrate how both tools complement each other to create responsive layouts with minimal effort.
Conclusion
By combining CSS Grid and Flexbox, you can build modern and responsive personal website landing pages with ease. Grid helps structure the layout, while Flexbox ensures the elements inside are neatly aligned. Together, they give you powerful control over your designs, making it easy to create layouts that adapt beautifully to any screen size.
Stay Updated for More Web Development Insights
If you found this example helpful and want to explore more advanced CSS techniques like combining Flexbox and CSS Grid, make sure to follow me for future updates! I regularly share tips, tutorials, and examples to help you build better websites.
Feel free to connect with me on social media or reach out if you have any questions—I’d love to hear from you!
Top comments (0)