anton-abyzov anton-grid
A small CSS-grid helper skill. Turns a plain-language layout request into a
ready-to-paste display: grid block with sensible responsive defaults.
Workflow
- Read the requested column count and gap.
- Emit a
.gridrule withgrid-template-columns: repeat(N, minmax(0, 1fr)). - Add a mobile breakpoint that collapses to a single column.
Example
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 640px) {
.grid {
grid-template-columns: 1fr;
}
}