Responsive design is an essential part of modern web development, but did you know you can create responsive layouts without a single media query? In this tutorial, we’ll explore a simple HTML and CSS solution that uses CSS Grid’s auto-fit and minmax() to build adaptable, stylish profile cards that work seamlessly across devices.
Video Tutorial:
HTML:
The HTML is clean and minimal, focusing on semantic structure and clarity. Inside the <body>, there’s a <section> with the class cards that holds three div elements with the class card. Each card contains an <img> element for the profile photo and a nested div with the class details, which includes two headings: one for the role (h3) and one for the person’s name (h4). This logical grouping ensures content is both visually and structurally organized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Cards Without Media Queries</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="cards">
<div class="card">
<img src="profile-image-1.jpg" />
<div class="details">
<h3>Co-Founder</h3>
<h4>Elbert Raymond</h4>
</div>
</div>
<div class="card">
<img src="profile-image-2.jpg" />
<div class="details">
<h3>Developer</h3>
<h4>Keri Beasly</h4>
</div>
</div>
<div class="card">
<img src="profile-image-3.jpg" />
<div class="details">
<h3>Designer</h3>
<h4>Tessa Johnson</h4>
</div>
</div>
</section>
</body>
</html>
CSS:
The magic lies in the CSS, especially the use of CSS Grid to make the layout responsive. The .cards container uses display: grid with grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This powerful line automatically adjusts the number of columns based on the screen size, with each card taking up a minimum of 250px and growing to fill available space. No media queries are needed!
Styling continues with individual cards, which are given a soft background color, rounded corners, and subtle shadows for a modern, elevated look. The images span the full width of the card, and the details section adds padding and sets typography for readability. Each element is spaced and styled to maintain balance and visual appeal, regardless of screen width.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
body {
font-family: "Poppins", sans-serif;
padding: 20px;
}
.cards {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
background-color: #f4f4f4;
border-radius: 10px;
overflow: hidden;
text-align: center;
box-shadow: 0 0 16px 0 rgba(187, 187, 187, 0.48);
}
.card img {
width: 100%;
height: auto;
}
.details {
padding: 15px;
}
.details h3 {
margin-bottom: 5px;
font-size: 18px;
color: #909090;
}
.details h4 {
font-size: 16px;
color: #1f294c;
}
Conclusion
This project is a perfect example of how modern CSS features like Grid Layout can simplify responsive design. By using auto-fit and minmax(), you can build layouts that adapt fluidly to different screen sizes without needing to write multiple media queries. Whether you’re building a team section, a product grid, or a portfolio gallery, this technique is a powerful and elegant solution. Give it a try in your next project!
Would you like to convert this into a reusable component or add hover effects for interactivity?
Â
