css Question posted in
Some basic documentation can be found here.

CSS Grid Images do not scale

Am I doing something wrong that the css grid command is not scaling the items in my grid? I must be misinterpreting how the minmax value works.

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  /* flex-shrink: 0; */
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
  gap: 1em;
  width: 100%;
  height: 80%;
}

.image {
  display: flex;
  background-size: cover;
  border: solid .5vh black;
  /* overflow: auto; */
  aspect-ratio: 16/9;

}

.image:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);

I assumed that setting a min and max value using minmax would allow the grid items to scale up or down to fill the size of the grid. My grid is a child of .wrapper. The grid items always scale to whatever value is present in the min portion of the parameter. I thought this was as small as they can go and the value after the comma is as large as they can go. I expected the grid items to scale up if there were fewer items in the grid and scale down if there were more.

All that happens is the grid items stay the same size and start to overflow the parent .wrapper div.

.wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 4vh);
  height: calc(100vh - 4vh);
  margin: 2vh;
}
Tags:

2

Answers


  1. 0

    One solution is to change the div with class grid to flexbox, then adding following three properties to image class:

           object-fit: contain;
       height: 100%;
       width: 100%;

    height and width properties will fill the parent container by setting the size to 100% and
    Object fit will resize the image to fit its parent container with the correct aspect-ratio.

    The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.

    Check following example:

          .grid {
        display: flex;  /* Updated */
        align-content: center;
        justify-content: center;
        gap: 1em;
        width: 100%;
        height: 80%;
      }

      .image {
        background-size: cover;
        border: solid 0.5vh black;
        object-fit: contain;
        height: 100%;
        width: 100%;
        aspect-ratio: 16/9;
      }

      
      .wrapper {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 4vh);
        height: calc(100vh - 4vh);
        margin: 2vh;
      }

    This will make the child image div element fill up the size of its parent grid div element while maintaining aspect ratio (object-fit: contain).

    Login or Signup to reply.
  2. 0 
    .grid {
  display: grid;
  align-content: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(10vw, 50vw));
  gap: 1em;
  width: 100%;
  height: 80%;
}

.image {
  display: flex;
  background-size: cover;
  border: solid .5vh black;
}

.image:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

.wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 4vh);
  height: calc(100vh - 4vh);
   margin: 2vh;
}

    You’re correct in your understanding of the minmax() function in CSS Grid. It does set a minimum and maximum size for your grid items. However, the issue here seems to be with the way you’ve defined your minmax() values.

    In your grid setup, you’ve set grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));. Here, 10vw is the minimum size of the grid items, and 1fr is the maximum size. The 1fr means that each grid item can take up a fraction of the available space, but it doesn’t necessarily mean it will scale up to fill the entire grid if there are fewer items.

    If you want your grid items to scale up when there are fewer items, you might want to consider using minmax() with two absolute values instead. For example, you could use minmax(10vw, 50vw), which would allow your grid items to scale between 10% and 50% of the viewport width.

    Also, note that the aspect-ratio property in your .image class might be causing some issues with the grid item sizing. This property sets a preferred aspect ratio for the box, which could be affecting the scaling of your grid items.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search