More CSS Grid Component Patterns
CSS Grid has changed the way we think about layout on the web. Components have changed the way write code for the web. Put them together they are better than peanut butter and chocolate. In a previous post, I went over the two patterns you can use when building layout components with CSS Grid: The Stack and The Split components. In this post, we will be going into two more layout components using CSS Grid
The Columns and The Column Component
One of the longest-standing traditions in CSS frameworks is the concept of a twelve column grid. It opened up the world to a real, non-document flow-based layout. So intuitively might want to replicate that pattern using CSS Grid. This can easily be achieved with two components: the Columns and the Column component.
In the previous article, we learned about how to make two columns in the Split component supplying two CSS length values to the grid-template-columns property. So we could simply use that same logic and write something like this:
const Columns = styled.div`
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
`<Columns>
{/* content here */}
</Columns>
The above code does work, but luckily a new CSS function was added to improve the…
