design1 – Page Layout and Responsive Design with Gridlex

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.

Tutorial Videos

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.

Leave a comment

Your email address will not be published. Required fields are marked *