This content originally appeared on DEV Community and was authored by Sarmin Akter Dipty
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;
}
This content originally appeared on DEV Community and was authored by Sarmin Akter Dipty
Sarmin Akter Dipty | Sciencx (2021-12-25T06:20:00+00:00) Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS. Retrieved from https://www.scien.cx/2021/12/25/position-sticky-with-css-grid-conditional-border-radius-in-css-custom-scrollbars-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.