Home>

We are creating a food list that fits a screen with two rows and three rows. So I used css grid, but there is a space under the image and a mysterious space is created outside the screen. I also want the image to get smaller and smaller as I shrink the screen, but this is not possible

Error message

There is a space below the image and a mysterious space is created outside the screen. I also want the image to become smaller and smaller again (shrink until it disappears), but

Applicable source code
Sass
* {
    margin: 0;
    padding: 0
}
.food-card {
    width: 90vw;
    height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    .card {
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .card-img {
  width: 100%;
  height: 100%;
    }
}
html

  
    
       meat bun
      
      <p>A lot of special ingredients are wrapped in soft and soft fabric. You can eat it as it is, so you can enjoy it anytime, anywhere.</p>
    
     
    
  
  
    
       meat bun
      
      <p>A lot of special ingredients are wrapped in soft and soft fabric. You can eat it as it is, so you can enjoy it anytime, anywhere.</p>
    
     
    
  
  
    
       meat bun
      
      <p>A lot of special ingredients are wrapped in soft and soft fabric. You can eat it as it is, so you can enjoy it anytime, anywhere.</p>
    
    
      
    
  

If i use overflow, you won't get out of it, but you don't want to use it if you can.

Supplemental information (FW/tool version etc.)

Sass builds with the latest version of gulp. Please do not change html if possible.

  • Answer # 1

      

    There is a space below the image and a mysterious space is created outside the screen.

    Because the image is aligned to the baseline. That margin is called a descender. Details are as described in 9.4.2 Inline formatting contexts of Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification.

    A solution to this problem is to change thevertical-alignordisplayproperty.

    When changing thevertical-alignproperty (operation check link):

    * {
      margin: 0;
      padding: 0;
    }
    .food-card {
      width: 90vw;
      height: 100vh;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      .card {
        display: grid;
        grid-template-rows: auto 1fr;
      }
      .card-img {
        width: 100%;
        height: 100%;
        vertical-align: top;/* Add * /
      }
    }

    When changing thedisplayproperty (operation check link):

    * {
      margin: 0;
      padding: 0;
    }
    .food-card {
      width: 90vw;
      height: 100vh;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      .card {
        display: grid;
        grid-template-rows: auto 1fr;
      }
      .card-img {
        display: block;/* add * /
        width: 100%;
        height: 100%;
      }
    }

      

    I'd like the image to become smaller and smaller than the original size when the screen is shrunk, but this is not possible

    The resolution value for the minimum content size in grid items is the cause.

       § 6.6. Automatic Minimum Size of Grid Items   

    The automatic minimum size for a grid item in a given dimension is its specified size if it exists, otherwise its transferred size if that exists, else its content size, each as defined in [CSS-FLEXBOX-1]. if the grid item spans only grid tracks that have a fixed max track sizing function, its specified size and content size in that dimension (and the input to the transferred size in the other dimension) are further clamped to less than or equal to the stretch fit the grid area's size (so as to prevent the automatic minimum size from forcing overflow of its fixed-size grid area).

    To solve this, it is necessary to overwrite the minimum value using theminmaxfunction or themin-heightproperty.

    When using theminmaxfunction (operation check link):

    * {
      margin: 0;
      padding: 0
    }
    .food-card {
      width: 90vw;
      height: 100vh;
      grid-template-rows: minmax (0, 1fr);/* change * /
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      .card {
        display: grid;
        grid-template-rows: auto minmax (0, 1fr);/* change * /
      }
      .card-img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    When using

    min-heightproperty (operation check link):

    * {
      margin: 0;
      padding: 0
    }
    .food-card {
      width: 90vw;
      height: 100vh;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      .card {
        display: grid;
        grid-template-rows: auto 1fr;
        min-height: 0;/* add * /
      }
      .card-image {
        min-height: 0;/* add * /
      }
      .card-img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }