CSS KP 07 — Grid-template-rows, responsiveness-@media (min-width: 30rem), responsive typography
Grid row
- notice body’s reset’s min-height: 100vh;
/* reset - set up the body */
body {
...
min-height: 100vh;
}2.add out line in .grid-containercss, which is second child of body to visualize our grid row system.
html
<body class="home">
<header class="primary-header flex">....</header>
<section class="grid-container">....</section>
</body>css
.grid-container {
outline: 5px solid limegreen; <---- add this
display: grid;
column-gap: var(--container-gap, 2rem);
grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
}3. add display:grid to the body, which is the parent
body {
font-family: var(--ff-sans-normal);
font-size: var(--fs-400);
color: hsl( var(--clr-white) );
background-color: hsl( var(--clr-dark) );
line-height: 1.5;
min-height: 100vh;
border: 5px solid purple;
display: grid;
grid-template-rows: min-content 1fr; // <first element> <second element>
}
header {
border: 5px solid orangered;
}grid-template-rows: min-content 1fr; The first element will have a minimum content height, while the second element will have a fractional unit height.
Responsiveness
Let’s make it responsive, practicing the mobile first design instead of desktop first approach design.
@media (min-width: 45rem) { } // media query
@media (min-width: 45rem) { // mobile-first approach design
@media (max-width: 45rem) { // desktop-first approach designcss
//css
//Mobile version: for any width smaller than 45rem, we use this.
.grid-container {
border: 5px solid limegreen;
display: grid;
// (move all the styling from here to below)
}
//Desktop version: for any width larger than 45rem, we use the styles below.
@media (min-width: 45rem) {
.grid-container {
column-gap: var(--container-gap, 2rem);
grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
}
.grid-container > *:first-child {
grid-column: 2;
outline: 1px solid red;
}
.grid-container > *:last-child {
grid-column: 3;
outline: 1px solid yellow;
}
}problem: fonts are bleeding on the mobile version.
solution-> we change :root font sizes
Typography responsiveness
/* mobile */
@media (min-width: 35em) {
/* Styles for mobile */
}
/* tablet */
@media (min-width: 45em) {
/* Styles for tablet */
}/* ------------------- */
/* Custom properties */
/* ------------------- */
:root {
/* colors */
.....
/* font-sizes */
--fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
--fs-800: 3.5rem;
--fs-700: 1.5rem;
--fs-600: 1rem;
--fs-500: 1.75rem;
--fs-400: 0.9375rem;
--fs-300: 1rem;
--fs-200: 0.875rem;
/* font-families */
....
}
@media (min-width: 35em) {
:root {
--fs-800: 5rem;
--fs-700: 2.5rem;
--fs-600: 1.5rem;
--fs-400: 1rem;
}
}
@media (min-width: 45em) {
:root {
/* font-sizes */
--fs-800: 6.25rem;
--fs-700: 3.5rem;
--fs-600: 2rem;
--fs-400: 1.125rem;
}
}
/* ------------------- */
/* Utility classes */
/* ------------------- */
/* general */
@media (min-width: 45em) {
.grid-container {
column-gap: var(--container-gap, 2rem);
grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
}
.grid-container > *:first-child {
grid-column: 2;
outline: 1px solid red;
}
.grid-container > *:last-child {
grid-column: 3;
outline: 1px solid yellow;
}
}
//css
.d-block {
display: block;
}//html
<span class="d-block fs-900 ff-serif text-white">Space</span></h1>
