Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a fixed column in a responsive grid?

Using Bootstrap, is it possible to keep a grid column fixed for certain breakpoints? And for the same column to stack and flow with the page for other breakpoints?

In the sample below, for large screens, I want the content in the right column to scroll as the left column stays fixed. For small screens, the left column should stack over the right and the page should scroll as normal.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col">
    ...
    </div>
  </div>
</div>

CodePen sample

like image 445
myartsev Avatar asked May 21 '17 20:05

myartsev


People also ask

How to create a responsive grid layout?

In other words, creating a responsive grid layout means that grid items change their position as you resize the browser. Create a <div> element with an id "grid". Create nine <div> elements writing numbers in each of them. Set the display property to "grid" to display an element as a block-level grid container.

How many columns are in a responsive grid-view?

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window. Example: Responsive Grid View.

How to use CSS columns in responsive design?

With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully. You can declare columns on any block level element. Columns can be applied to a single element or applied to multiple elements by targeting their parent.

How to create a grid-Template-column?

Create a <div> element with an id "grid". Create nine <div> elements writing numbers in each of them. Set the display property to "grid" to display an element as a block-level grid container. Define the gap between the grid in pixels with the grid-gap property. Set grid-template-columns to "repeat (auto-fill, minmax (150px, 1fr))".


1 Answers

Offset the column that is not fixed:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col offset-lg-2">
    ...
    </div>
  </div>
</div>

And apply a media query to fix the other column for the relevant breakpoints:

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options https://getbootstrap.com/docs/4.0/layout/grid/#mixins

@include media-breakpoint-up('lg') {
    #left {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

Codepen sample

like image 156
myartsev Avatar answered Oct 06 '22 01:10

myartsev