Create CSS grid layout

Question

I need to create a layout using CSS grid like in the image below for resolutions above 900px:-

For resolutions below 900px I need the layout to look like this

So, far I have tried this :-

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

Above code creates image 1, but I am not able to change it to accommodate layout changes for below 900px (image2).

How to create this layout in CSS grid so that it creates layout as mentioned in image above?

you can find my code here: jsfiddle

Have you looked into media queries? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… — DBS
– DBS, Commented Apr 9, 2018 at 10:58
Could you may be please give me an example using css grid. I know media queries may be useful but how to change the order of elements — Akanksha Sharma
– Akanksha Sharma, Commented Apr 9, 2018 at 11:00
Check out this first: css-tricks.com/snippets/css/complete-guide-grid — webta.st.ic
– webta.st.ic, Commented Apr 9, 2018 at 11:22
I have read through it, but I am not able to make layout as in image. checkout my fiddle: jsfiddle.net/8th174ew/7 — Akanksha Sharma
– Akanksha Sharma, Commented Apr 9, 2018 at 11:24

Vadim Ovchinnikov · Accepted Answer · 2018-04-09 16:21:08Z

2

grid-template-areas should be easier to use

.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>

edited Apr 9, 2018 at 16:21

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

answered Apr 9, 2018 at 11:41

dhrDatt

1,0683 gold badges10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tahir Shahzad · Accepted Answer · 2018-04-09 11:32:56Z

I hope we can use grid-column-start, grid-column-end, grid-row-start and grid-row-end to achive required grids along with media.

.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>

Vivekraj K R · Accepted Answer · 2018-04-09 13:18:16Z

1

Hope grid-auto-flow: column will help along with mediaquery

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;  
  }
}

edited Apr 9, 2018 at 13:18

answered Apr 9, 2018 at 13:10

Vivekraj K R

2,5582 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Create CSS grid layout

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related