Tips for adjusting the position of the sidebar with a grid system

Question

Tips for adjusting the position of the sidebar with a grid system

I am working with a traditional design:

#divleft{
    float:left;
}

#sidebar{
    float:right;
}

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

divleft and sidebar are elements within panelb;

Now, I am exploring the use of grids

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

Given this setup, how can I arrange sidebar below divleft on a screen width of 900px?

css css-grid

Answer 1

Answer №1

To create responsive columns, the best approach is to utilize media queries.

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

If you want to change the order of the columns, you can use the order property on #divleft and #sidebar.

I recommend using classes instead of id's, even for single elements, as id's can have unintended side effects like affecting the global window and increasing specificity in CSS.

Answer 2

To create responsive columns, the best approach is to utilize media queries.

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

If you want to change the order of the columns, you can use the order property on #divleft and #sidebar.

I recommend using classes instead of id's, even for single elements, as id's can have unintended side effects like affecting the global window and increasing specificity in CSS.

Tips for adjusting the position of the sidebar with a grid system

Answer №1

Similar questions

Adjust the width of a box-shadow using percentage values in CSS

The project is experiencing difficulties in loading the Module CSS

Labels are overlapping each other and being aligned to the right side

Customizing Images using a JSON array of images

Animate the CSS when the content is within the viewport using pagepiling.js integration

Change the colors of a dynamic row in an HTML table using various options

Is it possible to load images top to bottom?

Central peak in an expansive sphere

What is the best way to incorporate a specific term from the class into CSS styling

JavaScript Loading Screen - Issues with window.onload functionality

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Not all words are compatible with word-wrap, don't you think?!

Structured chat interface with unchanging top and bottom sections

Can you explain how to incorporate a node module script into a React.js project?

Displaying left and right div elements alongside each other in HTML/CSS works in Chrome, but not in Safari or Firefox

Troubleshooting issue with CSS code for table scrolling functionality

Attempting to align navigation bar in the middle of the page

Guide to changing the color of SVG images on a live webpage

HTML/CSS: Issue with image grid layout where images of different heights are not wrapping correctly

Including Previous & Next Buttons in Product Categories