How to Maintain Aspect Ratio of Div Grid Element to Set Correct Margins on Top/Bottom or Sides in CSS ?
Last Updated :
26 Apr, 2023
Maintaining the aspect ratio of grid elements is an important aspect of web design as it ensures that the layout of the page remains consistent across different screen sizes and resolutions. When the aspect ratio of a grid element is maintained, it will always have correct margins on top/bottom or sides, making it easier to design responsive layouts that look good on any device. In this article, we will see how to maintain the aspect ratio of the div grid element that always has correct margins on the top/bottom or sides.
Syntax:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(250px, auto);
grid-gap: 20px;
}
.item {
position: relative;
overflow: hidden;
}
.item img {
width: 100%;
height: auto;
}
The following approaches will be used to maintain the aspect ratio of the div grid element for having the correct margins on top/bottom or sides:
Approach 1: One way is to set the grid-row-end property to span a certain number of rows based on the height of the element. The grid-auto-rows property sets the minimum and maximum height of the grid items, with the auto value allowing the items to grow to fit their content. The .item class sets the position to relative and overflow to hidden, which ensures that any content that exceeds the dimensions of the item will be hidden. The .item img class sets the width to 100% and height to auto, which ensures that the image will scale proportionally to the width of the item. Finally, we use the grid-row-end property to span two rows for the first item, which makes it twice as tall as the other items.
Example: In this example, we have a container with four grid items that have a minimum width of 250px and a maximum width of 1fr (which means that they will fill the available space in the container).
HTML
<!DOCTYPE html>
<html>
<head>
<title>Aspect Ratio</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(250px, auto);
grid-gap: 20px;
}
.item {
position: relative;
overflow: hidden;
}
.item img {
width: 100%;
height: auto;
}
.item:nth-child(1) {
grid-row-end: span 2;
}
</style>
</head>
<body>
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<div class="container">
<div class="item">
<img src=
alt="Image">
</div>
<div class="item">
<img src=
alt="Image">
</div>
<div class="item">
<img src=
alt="Image">
</div>
<div class="item">
<img src=
alt="Image">
</div>
</div>
</body>
</html
|
Output:
Approach 2: Another approach is to use the padding-top property to create a responsive and scalable aspect ratio for the grid item. The document contains a container element with four child elements, each containing an image. The child elements are styled using CSS flexbox properties to create a responsive grid of four columns, each taking up 25% of the available width. The padding-top property is set to 75% on each child element to center the images vertically within their respective containers. Additional CSS rules are included to ensure that the images do not exceed their container’s width and to remove the padding from alternate child elements in the grid to create a seamless appearance. Finally, the document includes a centered heading element that reads “GeeksforGeeks”.
Example: This is an example HTML document that uses the padding-top property to center images within their parent containers.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Center Images with Padding-Top
</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 25%;
padding: 0 10px;
box-sizing: border-box;
}
.item img {
max-width: 100%;
height: auto;
}
.item:nth-child(2n+1) {
padding-right: 0;
}
.item:nth-child(2n) {
padding-left: 0;
}
</style>
</head>
<body>
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<div class="container">
<div class="item">
<img src=
alt="Image1">
</div>
<div class="item">
<img src=
alt="Image2">
</div>
<div class="item">
<img src=
alt="Image3">
</div>
<div class="item">
<img src=
alt="Image4">
</div>
</div>
</body>
</html>
|
Output:
Overall, this is a simple example of using the padding-top property to center images within their parent containers and demonstrates how this technique can be used to create a responsive image grid.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...