Learn CSS Grid

A short intro to using CSS Grid to create responsive web layouts.

The Challenge

The aim of this challenge is to learn how to use CSS Grid to recreate the layout of the BBC News home page.

When we're done, our web page will look like this:

Getting Started

Clone this repo and open index.html in your code editor.

Your task is to apply the following 5-column/2-row grid layout to the contents of <main class="posts">:

Note that:

• The grid item containing the main story image should span 2 columns
• The grid item containing the stories list should span both rows

Top tip: Open the page in your web browser and use the special toggle controls to help you align things.

Stretch Goal 1

Add:

• A 4-column layout for screen sizes between 768px-1024px.
• A 3-column layout for screen sizes below 768px.

Write the CSS for this part inside responsive.css.