Kevin Powell - Community•2d ago

Grid auto column

Hello! I have a main element that is in the center of the screen this main element contains h1 and grid this grid should have this many coulombs, they should be 4, but also, when narrowing the screen, respectively the parent, these coulombs should be resized and their number reduced, respectively 3,2,1 coulombs

3 Replies

croganm•2d ago

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4; /* This gets overridden by an inline style. */
  --grid-item--min-width: 250px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4; /* This gets overridden by an inline style. */
  --grid-item--min-width: 250px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

croganm•2d ago

Credit where credit is due: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

Mike Herchel

CSS-Tricks

An Auto-Filling CSS Grid With Max Columns Of A Minimum Size | CSS-T...

Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.

bockster6669OP•20h ago

I will try it later, thank you for the suggestion

Gaming

Programming

Grid auto column