Using CSS grid for optimal responsive design

Question

Using CSS grid for optimal responsive design

Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices.

Below is an example that functions perfectly on a desktop screen. Yet, when the screen size shrinks below 991px, I want the grid to be reorganized in this manner:

https://i.sstatic.net/rWXfA.jpg

How can I achieve this using CSS grid?

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

<div class="wrapper">
  <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

html css media-queries css-grid

Answer 1

Answer №1

To optimize your layout for different screen sizes, utilize the @media rule and make specific adjustments for screens with a width of 991px or less.

.container {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}

.container > div {
  background-color: #eee;
  padding: 1em;
}
.container > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

@media screen and (max-width:991px){

  .container {
    grid-template-columns:1fr 1fr;
  }
  .box1 {
    grid-column:1/4;
    grid-row:1/3;
  }

  .box2 {
    grid-column:1/2;
  }

  .box3 {
    grid-column:2/4;
  }
  
}

<div class="container">
  <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

Answer 2

To optimize your layout for different screen sizes, utilize the @media rule and make specific adjustments for screens with a width of 991px or less.

.container {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}

.container > div {
  background-color: #eee;
  padding: 1em;
}
.container > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

@media screen and (max-width:991px){

  .container {
    grid-template-columns:1fr 1fr;
  }
  .box1 {
    grid-column:1/4;
    grid-row:1/3;
  }

  .box2 {
    grid-column:1/2;
  }

  .box3 {
    grid-column:2/4;
  }
  
}

<div class="container">
  <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

Answer 3

Answer №2

If you want to implement a two-column grid layout for screens with a maximum width of 990px, you can utilize media queries along with the code

@media only screen and (max-width: 990px)

. Below is a demonstration of how you can achieve this:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
}

.wrapper>div {
  background-color: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column: 1/3;
  grid-row: 1/3;
}

.box2 {
  grid-column: 3;
}

.box3 {
  grid-column: 3;
}

@media only screen and (max-width: 990px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .box1 {
    grid-column: span 2; /* span the first row */
    grid-row: 1; /* first row */
  }
  .box2 {
    grid-column: 1; /* first column */
  }
  .box3 {
    grid-column: 2; /* second column */
  }
}

<div class="wrapper">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

Answer 4

If you want to implement a two-column grid layout for screens with a maximum width of 990px, you can utilize media queries along with the code

@media only screen and (max-width: 990px)

. Below is a demonstration of how you can achieve this:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
}

.wrapper>div {
  background-color: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column: 1/3;
  grid-row: 1/3;
}

.box2 {
  grid-column: 3;
}

.box3 {
  grid-column: 3;
}

@media only screen and (max-width: 990px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .box1 {
    grid-column: span 2; /* span the first row */
    grid-row: 1; /* first row */
  }
  .box2 {
    grid-column: 1; /* first column */
  }
  .box3 {
    grid-column: 2; /* second column */
  }
}

<div class="wrapper">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

Using CSS grid for optimal responsive design

Answer №1

Answer №2

Similar questions

What caused Safari to only show half of the page?

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

Custom HTML form created by Ryan Fait with additional unique elements

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

Content duplication occurs when sharing information

What is the best way to initiate a function upon each page load?

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

Use the inline IF statement to adjust the icon class depending on the Flask variable

Adjust text to fit within a specified height container automatically

Unable to get Bootstrap IMG-RESPONSIVE to function properly in Firefox and IE within the navbar

Designing tables and image galleries using HTML, CSS, and jQuery: A guide

What is the best method for enlarging the central image in Owl Carousel?

Performing addition and subtraction calculations with HTML and Javascript

Attach the div element firmly to the bottom of the webpage

Alignment of Inline SVG in HTML

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

Excerpts capturing the significance of HTML attribute values

When attempting to print a Bootstrap 4 HTML page in Chrome, the browser headers and footers are being clipped

Tips for positioning text underneath an image with HTML and CSS

Implement the addition of a class upon hovering using AngularJS