Practice Grid Layout

Create a simple card page based only on the Grid layout.

The goal

After this exercise, you will be able to apply the Grid layout to achieve a customized, responsive design for cards and grid-based data.

What you will learn
  • Know how to use the Grid layout
  • know how to make the grid-based design responsive.
Preliminary material

Please refer to the very first project in this series that explains in detail how to create and work on a project: 

Before you start, get familiar with the basics of the Grid layout. Jonathan Suh created the whole website dedicated to the Grid layout, please check it out: 

You also may want to refresh your memory about some common principles of HTML and CSS:

This is also a good short introduction to HTML: 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: 

  1. Decide on what you are going to create. It can be a fleet (as we did in our example), or team members, or list of available snickers, or even a pricing chart.
  2. Draw on the paper the basics of a future layout. Define the grid containers and cells inside.
  3. Create the empty page, add the header and grid to it. The first-level grid can help with centering the content.
  4. Divide the grid into blocks, assign the classes.
  5. Add the header, content, and footer to every block. Use tags <header> and <footer> and <div> for the central content.
  6. Add a grid to the footer or content.
  7. Fill up the data, add the images
  8. Specify the fonts, add some styling.
  9. Make sure the page looks responsive. For the best results, use the media queries.
  10. Test the page for different devices.

You can use our screenshot with marked grids for reference:

Additional ideas
  1. Play with cards' design: border, font, shadow, etc.
  2. Play with the number of cards, their width and position.
Acceptance criteria
  1. Add at least two grids to your page.
  2. Do not use any other alignments tools (like inline blocks or flex layout).
  3. The page should look well for every device. See the project's screenshots for reference.
No posts yet! Share your experience with this project, help others, ask and answer questions, get feedback