A short intro to using CSS Grid to create responsive web layouts.
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:
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.
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
.