CODEWITHSUNDEEP
csscss-grid
qadenza
qadenza

Reputation: 9293

how to reposition sidebar using grid

I have a classic layout:

#divleft{
    float:left;
}

#sidebar{
    float:right;
}

@media screen and (max-width: 900px) {
    #divleft, #sidebar{
        float:none; 
}

divleft and sidebar are children of panelb;

Now I want to use grid

#panelb{
    width:calc(100% - 30px);
    margin:25px auto 0 auto;
    display:grid;
    grid-template-columns: auto 340px;
}

In this case how can I reposition sidebar below divleft on 900px screen width?

Upvotes: 0

Views: 55

Answers (1)

René
René

Reputation: 6176

The easiest way is just use media queries for the columns.

#panelb {
  width: calc(100% - 30px);
  margin: 25px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
}

@media screen and (max-width: 900px) {
  #panelb {
    grid-template-columns: 1fr;
  }
}

#divleft {
  background: blue;
  height: 100px;
}

#sidebar {
  background: red;
  height: 100px;
}
<div id='panelb'>
  <div id='divleft'></div>
  <div id='sidebar'></div>
</div>

And if you'd like to change the order, you can set the order property on #divleft and #sidebar.

I would also advise not to use id's but classes. Even for elements that only exist once because id's have some other weird properties like "leaking" to window and having a highered specificity in css.

Upvotes: 1

Related Questions