Design a new CSS grid arrangement

Question

Design a new CSS grid arrangement

Need help with achieving a responsive layout using CSS grid. The design should be as seen in the image link below for resolutions over 900px:-

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

For resolutions lower than 900px, the layout should switch to resemble this https://i.sstatic.net/fGqCC.jpg

I have attempted the following so far:

.container {
   display: grid;
   grid-template-columns: 250px auto 250px;
   grid-column-gap: 1rem;
 }

The current code successfully creates the first image layout but I'm struggling with adapting it for the second layout under 900px resolution.

Any suggestions on how to modify the CSS grid to achieve the desired layout as shown in the images?

Feel free to check out my code here: jsfiddle

css css-grid

Answer 1

Answer №1

Improvements in using grid-template-areas

.item1 { grid-area: box1; }
.item2 { grid-area: box2; }
.item3 { grid-area: list; }
.item4 { grid-area: box3; }

.grid-container {
  display: grid;
  grid-template-areas:
    'box1 list box3'
    'box2 list box3';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
    .grid-container {
      grid-template-areas:
        'box1 list'
        'box2 list'
        'box3 list';
    }
}

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">Box 2</div>
  <div class="item3">List</div>  
  <div class="item4">Box 3</div>
</div>

Answer 2

Improvements in using grid-template-areas

.item1 { grid-area: box1; }
.item2 { grid-area: box2; }
.item3 { grid-area: list; }
.item4 { grid-area: box3; }

.grid-container {
  display: grid;
  grid-template-areas:
    'box1 list box3'
    'box2 list box3';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
    .grid-container {
      grid-template-areas:
        'box1 list'
        'box2 list'
        'box3 list';
    }
}

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">Box 2</div>
  <div class="item3">List</div>  
  <div class="item4">Box 3</div>
</div>

Answer 3

Answer №2

I am looking forward to utilizing grid-column-start, grid-column-end, grid-row-start, and grid-row-end to create the necessary grids in conjunction with media queries.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.box2{
  grid-column-start:1;
  grid-column-end:2;
}
.list1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}
.box3{
 grid-column-start:3;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
}

@media (max-width:900px){
    .grid-container {
      grid-template-columns: auto auto;
    }
    .list1 {
    grid-row-start: 1;
    grid-row-end: 4;
    }
   .box3{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
    }
 
}

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="list1">3</div>  
  <div class="box3">4</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

Answer 4

I am looking forward to utilizing grid-column-start, grid-column-end, grid-row-start, and grid-row-end to create the necessary grids in conjunction with media queries.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.box2{
  grid-column-start:1;
  grid-column-end:2;
}
.list1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}
.box3{
 grid-column-start:3;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
}

@media (max-width:900px){
    .grid-container {
      grid-template-columns: auto auto;
    }
    .list1 {
    grid-row-start: 1;
    grid-row-end: 4;
    }
   .box3{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
    }
 
}

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="list1">3</div>  
  <div class="box3">4</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

Answer 5

Answer №3

Hopefully, utilizing grid-auto-flow: column combined with mediaquery will provide the desired layout

Access the code on Fiddle here

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">List</div>
  <div class="item3">Box 2</div> 
  <div class="item4">Box 3</div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 25% 50%;
  grid-gap: 10px;
  grid-auto-flow: column;

  > div {
    border: solid 1px #00f;
    padding: 10px;
  }
}

.item2 {
  grid-row-start: 1;
  grid-row-end:   3;
  grid-column: 2 / 3;
}


@media screen and (max-width: 900px) { 
  .grid-container { 
    grid-template-columns: 25% 1fr ;
  }

.item2 {
    grid-row-end: 4;  
  }
}

Answer 6

Hopefully, utilizing grid-auto-flow: column combined with mediaquery will provide the desired layout

Access the code on Fiddle here

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">List</div>
  <div class="item3">Box 2</div> 
  <div class="item4">Box 3</div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 25% 50%;
  grid-gap: 10px;
  grid-auto-flow: column;

  > div {
    border: solid 1px #00f;
    padding: 10px;
  }
}

.item2 {
  grid-row-start: 1;
  grid-row-end:   3;
  grid-column: 2 / 3;
}


@media screen and (max-width: 900px) { 
  .grid-container { 
    grid-template-columns: 25% 1fr ;
  }

.item2 {
    grid-row-end: 4;  
  }
}

Design a new CSS grid arrangement

Answer №1

Answer №2

Answer №3

Similar questions

How can I ensure a div always moves to the right by using margin-right auto?

Increase the div id using jQuery

Angular - creating adaptive HTML container with CSS styling

The CSS style is missing from the print preview

Are browser zoom and screen size variations equivalent in terms of impact on display?

Enhancing the appearance of a PHP HTML email

Tips for seamlessly integrating an overlay into a different image

Using Angular 6 to load external HTML files with CSS inside a router-outlet

When the canvas is dragged, an item within it suddenly leaps or bounces

What are some tips for leveraging aframe in order to achieve a captivating 360 video effect?

Automatically populate a div with content from a file

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

Revamping Existing Styles: Making a Statement with `:after`

Choosing several buttons in typescript is a skill that every programmer must possess

Replace Font Awesome icon with a background image

Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

using node-sass with several different starting points

Transform HTML content into a PDF document with page breaks

Removing the gridlines in a Linechart using Apexcharts

Ways to stop cascading CSS attributes to child elements?