Is there any way to make a card container size square using CSS Grid?-CodePudding

Here you can see that the height of these cards height is dependent on the image inside it. I want them to be square regardless of image dimensions i.e. card container should be in square format then we can use image object-fit:cover, I have used aspect-ratio:1 property but it Doesn't work everywhere as it's in experimental stage. Click here to see the screenshot.

.card-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
  padding: 1rem;
}

.card {
  aspect-ratio: 1; // property is in experimental stage, doesn't work everywhere
}

.card img {
  object-fit: cover;
}

CodePudding user response：

You can resort to the old trick of setting padding-bottom to 100% and height 0, this ensures the item is square because padding is created using the width rather than height of an element.

In this snippet he images have different aspect ratios and natural sizes so you can see that it works for any combination of these.

.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
  padding: 1rem;
  width: 20vw;
}

.card {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  box-sizing: border-box;
  position: relative;
}

.card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div >
  <div ><img src="https://picsum.photos/id/1015/200/300"></div>
  <div ><img src="https://picsum.photos/id/1015/300/300"></div>
  <div ><img src="https://picsum.photos/id/1015/400/300"></div>
  <div ><img src="https://picsum.photos/id/1015/200/200"></div>
  <div ><img src="https://picsum.photos/id/1015/400/400"></div>
  <div ><img src="https://picsum.photos/id/1015/100/300"></div>
  <div ><img src="https://picsum.photos/id/1015/200/300"></div>
  <div ><img src="https://picsum.photos/id/1015/300/300"></div>
</div>

CodePudding user response：

You have setted the object-fit opt incorrectly.

Try object-fit: contain; to fix the issue.

CodePudding user response：

Here is the working code. You can take a look at it. Uses grid property but instead of using aspect-ratio you can replicate it with the help of pseudo classes. Added comments where necessary. Let me know if any part of it require explanation. I have used images from picsum and they are not exactly square so you can be assured it works no matter the image dimension.

Edit: Since the minimum value for each column is 200px, taking grid gap into account, after approximately 450px or so, you may get a single column grid. But if you want a double grid for devices below that screen size, you can reduce the minmax() value to something like minmax(100px, 1fr) via media query accoringly for the parent container.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* not explicit repeat, adjusts to screen size based on minmax() */
    grid-gap: 1rem;
}

.container div {
    display: grid;
    background: black;
    padding: 1rem;
    position: relative;
}

/* results in squared div no matter the screen sizes*/
.container > div::before {
    content: "";
    padding-bottom: 100%;
    display: block;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

/* place image on top of :before */
.container > div::before, img {
    grid-area: 1/1/2/2;
}

<div >
        <div><img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1010/5184/3456.jpg?hmac=7SE0MNAloXpJXDxio2nvoshUx9roGIJ_5pZej6qdxXs" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1035/5854/3903.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1032/2880/1800.jpg?hmac=5SLBdyPZBMyr5IBkIRfffZV10bP87Y7RrxVZX1vCefA" alt=""></div>
    </div>

CodePudding user response：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* not explicit repeat, adjusts to screen size based on minmax() */
    grid-gap: 1rem;
}

.container div {
    display: grid;
    background: black;
    padding: 1rem;
    position: relative;
}

/* results in squared div no matter the screen sizes*/
.container > div::before {
    content: "";
    padding-bottom: 100%;
    display: block;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

/* place image on top of :before */
.container > div::before, img {
    grid-area: 1/1/2/2;
}

<div >
        <div><img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1010/5184/3456.jpg?hmac=7SE0MNAloXpJXDxio2nvoshUx9roGIJ_5pZej6qdxXs" alt=""></div>
        <div><img src="https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bmF0dXJlfGVufDB8MXwwfHw=&auto=format&fit=crop&w=500&q=60" alt=""></div>
        <div><img src="https://i.picsum.photos/id/1032/2880/1800.jpg?hmac=5SLBdyPZBMyr5IBkIRfffZV10bP87Y7RrxVZX1vCefA" alt=""></div>
    </div>