Popular syntax
Jump to navigation
Jump to search
Clamp
fluid designs without using media quires
.box{ margin: 15px auto; background: red; width: clamp(220px, 55%,300px); height: 150px; } //min width, prefered width, max width
Centering divs
.items { display: grid; grid-template-columns: repeat(4, 1fr); background: white; .item { max-width: 350px; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; align-self: center; justify-self: center; } }
Centering Divs using AutoFit
The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes.
One way around this, which still allows for flexible column sizes, is to use max-content instead of 1fr, along with auto-fit.
grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); justify-content: center;
Centering Text Vertically in DIV
HTML Markup
<div class="main"> <div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div> <div class="left"> <p>some text</p></div> </div>
CSS Markup
.main{ display: flex; align-items: center; }
Dealing with images
img{width: 100%} img{aspect-ratio: 1 / 1; object-fit: contain;}
or
img{aspect-ratio: 1 / .5;}
Make images the same size without stretching and knock out the background
img{ width: 15%; aspect-ratio: 3/2; object-fit: contain; mix-blend-mode: color-burn;
Media Queries
/* On screens that are 992px or less, set the background color to blue */ @media screen and (max-width: 992px) { body { background-color: blue; } }