We’re almost done with our card system problem set! All five card types have been created and now it’s time to work on our page layout. We’re going to use a CSS library called Gridlex to help us out. CSS libraries are pre-built CSS files that create a set of tools to help with design. This particular library gives a ‘grid’ system built using flexbox.
This system is going to allow us to divide our page into grids which then inside can be divided into columns. Gridlex uses a common 12 column standard, allowing for a lot of layout flexibility. Given that the CSS is already written, we’ll learn to implement it by mostly editing our HTML pages.
We’ll also use Gridlex as well as some of our own CSS to create some responsive design. This means to have your site’s page layout respond to the size and shape of the browser window. We’ll use ‘media queries’ to accomplish this with the
@media (max-width: ) syntax to adjust all of our cards as well as the columns.
- Page Layout with Gridlex Grid System Part 1
- Page Layout with Gridlex Grid System Part 2
- Responsive Design with Gridlex System (extra cards HTML)
- Responsive Design with Attribute Selectors Card System
For the Blog
Describe how nesting a grid works. What makes it possible to have a column also become a grid? Describe this in the context of flex containers and flex items.