DEV Community

Cover image for Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS
Sarmin Akter Dipty
Sarmin Akter Dipty

Posted on

Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS

Image description

CSS Blogs

Position Sticky With CSS Grid
Have I ever come across a case where the sticky position isn’t working as expected with a child of a grid container? A few days ago, I was helping youtube in fixing that exact problem and wanted to finally write about it.

HTML__:




CSS__:

 .wrapper {
display: grid;
grid-template-columns: 250px minmax(10px, 1fr);
grid-gap: 1rem;
Enter fullscreen mode Exit fullscreen mode

}

Conditional Border Radius In CSS
We have a card component with a border-radius of 8px. When the card doesn’t have margin or is taking the full viewport width, we want to flip the border-radius to 0.

CSS__:

 @media (min-width: 700px) {
.card {
    border-radius: 8px;    
}
Enter fullscreen mode Exit fullscreen mode

}

Custom Scrollbars In CSS

First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones.
CSS__:
.section::-webkit-scrollbar {
width: 10px;

}

CSS Scroll Snap
To create a scrolling container, here are the basic things that you will need:
Using the overflow with a value other than visible.A way to display the items next to each other inline.
HTML__:

Item 1
Item 2
Item 3
Item 4
Item 5

CSS__:
.section {
white-space: nowrap;
overflow-x: auto;
}

Discussion (0)