Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
| Line 19: | Line 19: | ||
} | } | ||
</pre> | </pre> | ||
== Centering Divs using autofit == | |||
<h2>auto-fit</h2> | |||
<h3>The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. | |||
In your case, since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</h3> | |||
== Centering Text Vertically in DIV == | == Centering Text Vertically in DIV == | ||
Revision as of 20:04, 18 December 2022
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
auto-fit
The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. In your case, since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items
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;}
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;
}
}