CSS: create a responsive grid layout using only CSS #138562
Replies: 4 comments 1 reply
-
Hey there! 👋 Thanks for posting in the GitHub Community, @vladimir-de-oppenheimer ! We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category. The Accessibility category is a place for our community to discuss and provide feedback on the digital accessibility of GitHub products. Digital accessibility means that GitHub tools, and technologies, are designed and developed so that people with disabilities can use them. We’ve moved your post to our Programming Help 🧑💻 category, which is more appropriate for this type of discussion. Please review our guidelines about the Programming Help category for more information. |
Beta Was this translation helpful? Give feedback.
-
To create a responsive grid layout that maintains a 16:9 aspect ratio for grid items using only CSS, you can utilize the "padding-bottom" technique along with CSS Grid or Flexbox. Here’s a detailed example using CSS Grid:
Detailed Explanation: display: grid;: Defines the container as a grid. padding-bottom: 56.25%;: This technique uses the bottom padding to create a box with the desired aspect ratio. The percentage is calculated based on the formula height / width * 100%, where 16:9 translates to 56.25% (9 / 16 * 100%). This makes the bottom padding of .grid-item determine its height, maintaining the 16:9 ratio. .grid-item: position: relative; allows the padding-bottom to set the height, and the image inside is positioned absolutely. The grid adjusts automatically to the screen size due to auto-fill and minmax, ensuring the layout is flexible and responsive. The container's maximum width (max-width: 1200px;) and automatic width adjustment (width: 90vw;) ensure the layout adapts well to different screen sizes. |
Beta Was this translation helpful? Give feedback.
-
Responsive Grid Layout with 16:9 Aspect Ratio Using Only CSSThis example demonstrates how to create a responsive grid layout that ensures all grid items maintain a 16:9 aspect ratio. The layout adjusts to different screen sizes without using JavaScript or fixed heights. Key Concepts:
HTML and CSS Solution:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid with 16:9 Aspect Ratio</title>
<style>
/* Base grid layout */
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding: 1rem;
}
/* Grid items with 16:9 aspect ratio */
.grid-item {
position: relative;
background-color: #ccc;
overflow: hidden;
}
.grid-item::before {
content: "";
display: block;
padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
}
.grid-item-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 1.5rem;
}
/* Responsive design */
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<div class="grid-item-content">Item 1</div>
</div>
<div class="grid-item">
<div class="grid-item-content">Item 2</div>
</div>
<div class="grid-item">
<div class="grid-item-content">Item 3</div>
</div>
<div class="grid-item">
<div class="grid-item-content">Item 4</div>
</div>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
Please see this comment for reference to why this discussion was closed and locked. Thanks! |
Beta Was this translation helpful? Give feedback.
-
How can you create a responsive grid layout using only CSS, ensuring that the grid items maintain a 16:9 aspect ratio, and the grid itself adjusts to different screen sizes without using JavaScript or fixed heights?
Beta Was this translation helpful? Give feedback.
All reactions