search

Home  >  Q&A  >  body text

Grid items that limit content expansion

<p><strong>TL;DR:</strong> Is there a property similar to <code>table-layout: fixed</code> for CSS grid layout? </p> <hr /> <p>I'm trying to create a year view calendar with a large 4x3 grid for the months and nested inside is a 7x6 grid for the dates. </p> <p>The calendar should fill the entire page, so the width and height of the year grid container are set to 100%. </p> <pre class="brush:php;toolbar:false;">.year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); }</pre> <p>Here is a working example: https://codepen.io/loilo/full/ryXLpO/</p> <p>For simplicity, each month in this example has 31 days and starts on Monday. </p> <p>I also chose a very small font size to demonstrate the problem: </p> <p>The grid items (i.e. date cells) are very compact since there are hundreds of date cells on the page. And once the date labels get too big (feel free to use the buttons in the upper left corner to adjust the font size in the example), the grid grows and exceeds the bounds of the page. </p> <p>Is there a way to prevent this behavior? </p> <p>I originally set the width and height of the year grid to 100%, so that might be the place to start, but I can't find any grid-related CSS properties to satisfy this need. </p> <p><em>Disclaimer: </em>I know there are easy ways to style this calendar without using CSS Grid layout. However, this question is more about general knowledge of the topic rather than addressing specific examples. </p>
P粉199248808P粉199248808467 days ago520

reply all(2)I'll reply

  • P粉304704653

    P粉3047046532023-08-21 13:34:12

    The previous answers are very good, but I also want to mention that for grids there is an equivalent way of fixing the layout, you just need to case your tracks as minmax(0, 1fr ) instead of 1fr.

    reply
    0
  • P粉818088880

    P粉8180888802023-08-21 00:00:55

    By default, the size of a grid item cannot be smaller than the size of its content.

    The initial sizes of grid items are min-width: auto and min-height: auto.

    You can do this by setting the grid items to min-width: 0, min-height: 0 or overflow (except visible# any value other than ##) to override this behavior.

    From specification:

    Here is a more detailed explanation that covers flex items, but also applies to grid items:

    • Why can't flex items shrink below the content size?
    This article also covers

    potential issues with nested containers and known rendering differences between major browsers.


    To fix your layout, make the following adjustments to your code:

    .month-grid {
      display: grid;
      grid-template: repeat(6, 1fr) / repeat(7, 1fr);
      background: #fff;
      grid-gap: 2px;
      min-height: 0;  /* 新增 */
      min-width: 0;   /* 新增;Firefox需要 */
    }
    
    .day-item {
      padding: 10px;
      background: #DFE7E7;
      overflow: hidden;  /* 新增 */
      min-width: 0;      /* 新增;Firefox需要 */
    }

    jsFiddle Demonstration


    1fr and minmax(0, 1fr)

    The above solution operates on the grid item level. For container-level solutions, see the following articles:

    • Why is minmax(0, 1fr) valid but 1fr invalid for long elements?
    • reply
      0
  • Cancelreply