KPC
Kevin Powell - Community•2mo ago
bockster6669

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
No description
3 Replies
croganm
croganm•2mo 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
croganm•2mo 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.
bockster6669
bockster6669OP•2mo ago
I will try it later, thank you for the suggestion

Did you find this page helpful?