CSS KP 07 — Grid-template-rows, responsiveness-@media (min-width: 30rem), responsive typography

3 min readSep 24, 2024

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 design

css

//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;
    }
}

we don’t want ‘to’ to be in the same line as ‘space’

//css
.d-block {
    display: block;
}

//html
     <span class="d-block fs-900 ff-serif text-white">Space</span></h1>

CSS KP 07 — Grid-template-rows, responsiveness-@media (min-width: 30rem), responsive typography

Grid row

Responsiveness

@media (min-width: 45rem) { } // media query

Typography responsiveness

Written by Greem

No responses yet