Lab 4: CSS Responsive Grid - Test Your Knowledge

CSS Grid Layout Realworld Example

The below screenshots have been taken from https://www.Classicandsportscar.ltd.uk

Recap: A 'viewport' is the user's visible area of a web page, which is determined by the size of the browser window.

Lab Exercise

Recreate the image gallery from the screenshots above. You don't need to create the navbar, side menu, footer or any other elements besides the car photo gallery and accompanying text. Use a responsive CSS grid layout with media queries. You can use placeholder images from any source.

  1. For the mobile viewport, create a single column layout with each car image and text to the righthand side taking up the full width of the viewport. Create this using a Flexbox.
  2. For the tablet viewport, create a two column layout with each car image and text underneath taking up 50% of the width of the viewport. Create this using a CSS Grid. Inside the first grid item, place the Flexbox container created in task 1.
  3. For the desktop/laptop viewport, create a three column layout with each car image and text underneath taking up 33.33% of the width of the viewport.
  4. Add some spacing between the images using grid-gap or padding/margin.
  5. Use the following breakpoints for your media queries:
    • Mobile: 0 - 599px
    • Tablet: 600 - 899px
    • Desktop: 900px and above

    Recap: A 'breakpoint' is a specific point in the CSS where the layout changes based on the viewport size. See notes on responsive design for more information.

  6. Include at least 6 car images with accompanying text (car name and price) below each image.
  7. Add a title above the gallery that says "Classic and Sports Car Gallery".
  8. Add a short description below the title that says "A selection of classic and sports cars available for sale."

Tips

Everything you need to know is in our previous labwork on Responsive CSS Grid Layouts. The main difference is the approach to styling for different screen sizes, and how to implement the text to the right hand side for mobile viewports. However instead of percentages, you could use fractions. See below.

Remember to test your layouts at each breakpoint to ensure they are working as expected.

The fr Unit

The fr unit is a fractional unit, an input that automatically calculates layout divisions when adjusting for gaps inside the grid.

Key Points