Making CSS Column Grid Responsive

We’ve already seen how to use media queries to make our web pages responsive.

We’ll use the same approach here as well.

But why should we add our columns to media queries, and what will result from this?

To answer this question, let’s look at our example using the responsive preview in Chrome. Here are the steps to follow:

1. Open developer tools by pressing “F12” or “Option+Command+I.”

2. Click the “Toggle device toolbar” icon (or press the “CTR+LSHIFT+M” or “Command+Shift+M” keyboard combination).

3. Set your responsive preview to a phone-like width, such as 400px.

Here’s how this looks in the browser: