12442 shaares
297 private links
297 private links
640 results
tagged
CSS
minmax(0, 1fr)
because by default the min size is auto which leads to be the size of the element
Less than 10kb gziped and do the job
WOW this use of attr() function in CSS ♥
$gridGap: 2rem;
$minColWidth: 15rem;
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
grid-gap: 2rem;
& + .grid {
margin-top: $gridGap;
}
}Can be useful at any time !
Flexbox
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
// Optional
main {
margin: 0 auto;
// or: align-self: center
max-width: 80ch;
}
Grid
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
// Optional
main {
margin: 0 auto;
max-width: 80ch;
}Reusable svg shapes
A list of known issues with flexbox and how to solve them if possible