moshiurse/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css grid</title>
</head>

<style>
    .container {
        display: grid;
        width: 500px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto 0;
        grid-template-columns: auto auto;
        grid-template-rows: 70px 50px auto;
    }

    .item {
        border: 5px solid red;
    }

    .container2 {
        width: 500px;
        height: 300px;
        margin: 100px auto 0;
        display: grid;
        grid-template-columns: repeat(4, auto);
        grid-gap: 1em;
    }

    .container2 .item {
        border: 5px solid red;
    }

    .container2 .item:first-child{
        background-color: aqua;
        grid-row: 2 / 3;
        grid-column: 1 / 4;
    }

    .container2 .item:last-child{
        background-color: green;
        grid-column: 2 / 5;
    }

    .container3 {
        display: grid;
        grid-template-columns: 150px auto;
        grid-template-rows: 100px auto 100px;
        grid-template-areas:
            "header header"
            "nav main"
            "nav footer";
    }
    .container3 header{
        grid-area: header;
        background: red;
    }
    .container3 nav{
        grid-area: nav;
        background: brown;
    }
    .container3 main{
        grid-area: main;
        background: #e3e3e3;
    }
    .container3 footer{
        grid-area: footer;
        background: brown;
    }

    .container4 {
        width: 500px;
        margin: auto;
        background: #e3e3e3;
        display: grid;
        grid-template-columns: 100px 2fr 1fr;
        grid-template-rows: repeat(3, 50px);
        grid-gap: 1em;
    }

    .container4 > div {
        background: #999;
        font-weight: bold;
        color: white;
        font-family: sans-serif;
    }

    .container5 {
        display: grid;
        grid-template-columns: repeat(4, 100px);
        grid-gap: 1em;
    }

    .container5 .box {
        background-color: #999;
        color: white;
        border-radius: 2px;
        padding: 10px;
    }

    .container5 .a {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .container5 .b {
        grid-column: 3 / 5;
    }

    .container6{
        display: grid;
        /* grid-template-columns: repeat(auto-fill, 200px); */
        /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-gap: 10px;
    }

    .container6 .box {
        background: cornflowerblue;
    }
</style>
<body>

    <h4>Container 1</h4>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

    <h4>Container 2</h4>
    <div class="container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>

    <h4>Container 3</h4>
    <section class="container3">
        <header>Header</header>
        <nav>Navigation</nav>
        <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa iste possimus voluptatum corporis! Illo maxime vel necessitatibus, rem deserunt, doloremque numquam quam cupiditate et sit eius. Exercitationem, natus a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa iste possimus voluptatum corporis! Illo maxime vel necessitatibus, rem deserunt, doloremque numquam quam cupiditate et sit eius. Exercitationem, natus a?</main>
        <footer>Footer</footer>

    </section>


    <h4>Container 4</h4>
    <div class="container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

    <h4>Container 5</h4>
    <div class="container5">
        <div class="box a">
            <div class="box">A1</div>
            <div class="box">A2</div>
            <div class="box">A3</div>
            <div class="box">A4</div>
        </div>
        <div class="box b">B</div>
        <div class="box c">C</div>
        <div class="box d">D</div>
        <div class="box e">E</div>
        <div class="box f">F</div>
        <div class="box g">G</div>
        <div class="box h">H</div>
    </div>

    <h4>Container 6</h4>
    <div class="container6">
        <div class="box a">A</div>
        <div class="box b">B</div>
        <div class="box c">C</div>
        <div class="box d">D</div>
        <div class="box e">E</div>
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Css grid</title>
	</head>

	<style>
	.container {
	display: grid;
	width: 500px;
	height: 300px;
	background-color: aqua;
	margin: 100px auto 0;
	grid-template-columns: auto auto;
	grid-template-rows: 70px 50px auto;
	}

	.item {
	border: 5px solid red;
	}

	.container2 {
	width: 500px;
	height: 300px;
	margin: 100px auto 0;
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-gap: 1em;
	}

	.container2 .item {
	border: 5px solid red;
	}

	.container2 .item:first-child{
	background-color: aqua;
	grid-row: 2 / 3;
	grid-column: 1 / 4;
	}

	.container2 .item:last-child{
	background-color: green;
	grid-column: 2 / 5;
	}

	.container3 {
	display: grid;
	grid-template-columns: 150px auto;
	grid-template-rows: 100px auto 100px;
	grid-template-areas:
	"header header"
	"nav main"
	"nav footer";
	}
	.container3 header{
	grid-area: header;
	background: red;
	}
	.container3 nav{
	grid-area: nav;
	background: brown;
	}
	.container3 main{
	grid-area: main;
	background: #e3e3e3;
	}
	.container3 footer{
	grid-area: footer;
	background: brown;
	}

	.container4 {
	width: 500px;
	margin: auto;
	background: #e3e3e3;
	display: grid;
	grid-template-columns: 100px 2fr 1fr;
	grid-template-rows: repeat(3, 50px);
	grid-gap: 1em;
	}

	.container4 > div {
	background: #999;
	font-weight: bold;
	color: white;
	font-family: sans-serif;
	}

	.container5 {
	display: grid;
	grid-template-columns: repeat(4, 100px);
	grid-gap: 1em;
	}

	.container5 .box {
	background-color: #999;
	color: white;
	border-radius: 2px;
	padding: 10px;
	}

	.container5 .a {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	}

	.container5 .b {
	grid-column: 3 / 5;
	}

	.container6{
	display: grid;
	/* grid-template-columns: repeat(auto-fill, 200px); */
	/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-gap: 10px;
	}

	.container6 .box {
	background: cornflowerblue;
	}
	</style>
	<body>

	<h4>Container 1</h4>
	<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	</div>

	<h4>Container 2</h4>
	<div class="container2">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	</div>

	<h4>Container 3</h4>
	<section class="container3">
	<header>Header</header>
	<nav>Navigation</nav>
	<main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa iste possimus voluptatum corporis! Illo maxime vel necessitatibus, rem deserunt, doloremque numquam quam cupiditate et sit eius. Exercitationem, natus a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa iste possimus voluptatum corporis! Illo maxime vel necessitatibus, rem deserunt, doloremque numquam quam cupiditate et sit eius. Exercitationem, natus a?</main>
	<footer>Footer</footer>

	</section>


	<h4>Container 4</h4>
	<div class="container4">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	</div>

	<h4>Container 5</h4>
	<div class="container5">
	<div class="box a">
	<div class="box">A1</div>
	<div class="box">A2</div>
	<div class="box">A3</div>
	<div class="box">A4</div>
	</div>
	<div class="box b">B</div>
	<div class="box c">C</div>
	<div class="box d">D</div>
	<div class="box e">E</div>
	<div class="box f">F</div>
	<div class="box g">G</div>
	<div class="box h">H</div>
	</div>

	<h4>Container 6</h4>
	<div class="container6">
	<div class="box a">A</div>
	<div class="box b">B</div>
	<div class="box c">C</div>
	<div class="box d">D</div>
	<div class="box e">E</div>
	</div>

	</body>
	</html>