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

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;

}

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;    
}

}

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;
}