CSS grid columns

Responsive grid.

  • Snippet
  • CSS
  • 3 blanks to fill

Fill in the blanks

Your text

.class {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

Orange words are blanks you have not filled yet.

About this template

Responsive grid.

Pack
CSS
Type
Snippet, a short message
Asks for
class, Min, Gap

Use it anywhere you write: email, chat, a document or a support tool. If you send it often, save the finished text as a snippet in ClipBuddy and paste it again from your clipboard history with ⌘⇧V.

Template source

The template as written, with its blanks in double braces, such as {{Name}}.

.{{class}} {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax({{Min=240px}}, 1fr));
  gap: {{Gap=16px}};
}

More code snippets templates

See all 268 code snippets templates