Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get scrolling in a CSS grid?

I have a component embedded in a css-grid.

In stack blitz I have an external grid of 3 rows. The one of the rows has a min-width. How do I get it to scroll horizontally if the viewport is smaller than the min-width?

Within the middle row I have a component that itself uses a 2 column grid. The divs in the columns have a min-height.

What I am looking for is if the viewport is sized so that the entire inner component (red boxes) is not visible, the red box is scrollable.

here is a stack blitz:

https://stackblitz.com/edit/angular-q4geyk

Here is another example:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.content {
  display: grid;
  grid-template-rows: 2em 1fr 1px;
  grid-gap: 0.5rem;
  height: 20em;
}

.my-panel {
  border: 1 green solid;
  background-color: red;
  padding: 0.25rem;
}

.my-component {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  padding: 0.25rem;
  height: 100%;
}

header {
  border: green solid 1px;
  padding: 4px;
}

main {
  border: blue solid 1px;
  padding: 1rem;
}

main div {
  border: red solid 1px;
  height: 100%;
}

footer {
  border-bottom: black solid 1px;
}
<div class="content">
  <header>
    <div>Component Showcase</div>
  </header>

  <main>
    <div>
      <section class="my-component">
        <div class="my-panel">&nbsp;</div>
        <div class="my-panel">&nbsp;</div>
      </section>
    </div>
  </main>

  <footer></footer>
</div>
like image 731
ed4becky Avatar asked May 22 '20 16:05

ed4becky


People also ask

How do I turn on scroll in CSS?

Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.

How do I create a horizontal scrolling container in CSS?

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.

How do you code a horizontal scroll?

To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.

What is grid Auto Flow?

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.


2 Answers

You're encountering two main problems with the layout:

First, by default, a grid item cannot be smaller than its content. The defaults are min-width: auto and min-height: auto. Therefore, the main element, which is a grid item in app-root, needs an override.

Add min-width: 0 to main.

More complete explanation here: Prevent content from expanding grid items


Second, you have both columns with the red boxes set to:

grid-template-columns: 1fr 1fr

This means that each column will share an equal distribution of the free space in the container. Without any content in those columns, both columns can simply shrink to 0 width, never triggering an overflow. Hence, no scrollbar.

The same problem would exist if you did this:

grid-template-columns: 50% 50%

So, unless there will always be content in those columns to force a minimum width, I would recommend something like this:

grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr)

https://stackblitz.com/edit/angular-ortstl?file=src/styles.css

like image 93
Michael Benjamin Avatar answered Sep 21 '22 12:09

Michael Benjamin


.the_div_you_want_to_scroll{
display: grid ;
align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 25% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;
overflow: scroll;

}

This way you can add as many children as you need, In grid system, always hard to maintain dynamic content when using template,

when you can't predict how many items are you going to get, use grid-auto-flow

like image 31
Muhammed Shamil Avatar answered Sep 18 '22 12:09

Muhammed Shamil