DONT ADD ANYTHING HERE!

One
Two
Three
Four
Fived
Six
Seven
Eight
Nine

Notes

  1. The code is almost identical to the previous example (css_grid_example_three) except that
    1. the css code relating to media queries are in separate files (css_grid_one.css) and css_grid_two.css
    2. the files are accessed via link tags
  2. Best viewed in "Responsive design" mode

Header Stylesheet links

    <link rel="stylesheet" 
             href="../css/ecss.css" 
             title="Default">

    <link rel="alternate stylesheet" 
             href="../css/ecssAlt.css" 
             title="Dark Mode">

    <noscript><link rel="stylesheet" 
                    href="../css/ecss_nojs.css"></noscript>

    <style>
    
    </style>
    <link rel="stylesheet" 
             href="../css/css_grid_one.css" 
             media="screen and (min-width:600px)">

    <link rel="stylesheet" 
    href="../css/css_grid_two.css" 
             media="screen and (min-width:800px)">

Code

html 
    <div class="wrapper">
        <div class="grid-item one">One</div>
        <div class="grid-item two">Two</div>
        <div class="grid-item three">Three</div>
        <div class="grid-item four">Four</div>
        <div class="grid-item five">Fived</div>
        <div class="grid-item six">Six</div>
        <div class="grid-item seven">Seven</div>
        <div class="grid-item eight">Eight</div>
        <div class="grid-item nine">Nine</div>
    </div>
css 
    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto, 3);
        grid-auto-rows: minmax(100px, auto);
        column-gap: 1em;
        row-gap: 2em;
    }

    .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgoldenrodyellow;
    }
css_grid_one.css 
    .one {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .two {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .three {
        grid-column: 1 / 2;
        grid-row: 2/ 3;
    }

    .four {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .five {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .six {
        grid-column: 2/ 3;
        grid-row: 3 / 4;
    }

    .seven {
        grid-column: 1/ 2;
        grid-row: 4 / 5;
    }

    .eight {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }

    .nine {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }

    .grid-item {
        background-color: var(--primary-green);
        color: white;
    }
css_grid_two.css 
    .one {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .two {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .three {
        grid-column: 3 / 4;
        grid-row: 1/ 2;
    }

    .four {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .five {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .six {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    .seven {
        grid-column: 1/ 2;
        grid-row: 3 / 4;
    }

    .eight {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    .nine {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }

    .grid-item {
        background-color: lightgray;
        color: black;
    }

References