New grid-cols-repeat utility class in Causeway!

This new utility simplifies the creation of a flexible grid with custom breakpoints.

New to @infotechfl/causeway-tailwind-preset, the grid-cols-repeat-UNIT utility uses a theme spacing unit or arbitrary value to produce a flexible grid. This utility translates to the following CSS:

grid-template-columns: repeat(var(--tw-auto-sizing), minmax(UNIT, 1fr))

--tw-auto-sizing is set to auto-fit by default, but can be changed to auto-fill by adding the auto-fill class on the element in question.

Examples

  <div class="grid grid-cols-repeat-40">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <div class="grid grid-cols-repeat-40 auto-fill">
  ...
  </div>

  <div class="grid grid-cols-repeat-[300px]">
  ...
  </div>

View on Tailwind Play

You can also see this in action on this very site! The blog listing page is utilizing this utility to create the grid of posts.