Introduction
Creating clean, responsive layouts is one of the most important skills in web development. In this blog, I’ll walk you through how I built a simple two‑column design using CSS Grid. This approach makes it easy to divide a container into flexible sections, perfect for portfolios, dashboards, or any modern website.
Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
.container{
border: 1px solid black;
height:100vh;
width:65vw;
margin:auto;
display: grid;
grid-template-columns: 1fr 2fr;
}
.left{
border:1px solid red;
display:flex;
justify-content: center;
}
img{
height: 125px;
width:125px;
}
.right{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="Screenshot 2026-06-04 184043.png" alt="avatar">
</div>
<div class="right">
</div>
</div>
</body>
</html>
Key Sections
Understanding the Container
Explain the role of .container with display: grid.
Mention how grid-template-columns: 1fr 2fr; divides the space into two parts (left takes 1 fraction, right takes 2 fractions).
Styling the Left Section
Describe how you added a border and centered content using display: flex; justify-content: center;.
Show how the image fits neatly inside with fixed dimensions.
Designing the Right Section
Explain that the right side is currently empty but ready for text, forms, or other content.
Suggest possible uses: profile details, project descriptions, or contact information.
Why CSS Grid?
Compare Grid with Flexbox briefly.
Highlight that Grid is ideal for two‑dimensional layouts (rows + columns), while Flexbox is better for one‑dimensional alignment.
Enhancements
Add gap between columns for spacing.
Use responsive units (vw, %) to make the layout adapt to different screen sizes.
Experiment with background colors or padding for better visuals.
Output
