CodeLeom/grid.html

## grid.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid - Layout</title>
    <style>
        body {
            background-color: aqua;
        }
        /* grid layout styling */
        .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2px;
        }
        .container div {
            border: 1px solid black;
            height: 60px;
        }
        .container :first-child {
            grid-row: 1/3;
            grid-column: 1/4;
            border: 1px solid red;
            height: 120px;
        }

        /* float layout style */
        img {
            float: right;
            margin-left: 10px;
            border: 2px solid black;
        }
        section {
            display: flow-root;
        }

        /* multi column layout */
        .layout {
            column-count: 4;
            column-gap: 1px;
        }

        @media only screen and (min-width: 600px) {
            body {
                background-color: lightblue;
            }
        }
    </style>
</head>
<body>
    <h1>This is a Grid Layout System</h1>

    <div class="container">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
        <div>seven</div>
        <div>eight</div>
        <div>nine</div>
        <div>ten</div>
        <div>eleven</div>
        <div>twelve</div>
    </div>

    <h1>Float Layout</h1>
    <section>
        <img src="./images/food.jpg" alt="image in week one folder" width="100px" height="100px">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
    </section>

    <h1>Multi-Column Layout</h1>

    <h3>Fruits</h3>
    <ul class="layout">
        <li>Cashew</li>
        <li>mango</li>
        <li>Agbalumo/Cherry</li>
        <li>Banana</li>
        <li>Apple</li>
        <li>Guava</li>
        <li>Soursop</li>
        <li>Strawberry</li>
        <li>Pine-Apple</li>
        <li>Cuccumber</li>
        <li>Pear</li>
        <li>Orange</li>
        <li>Fruit</li>
        <li>Watermelon</li>
    </ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Grid - Layout</title>
	<style>
	body {
	background-color: aqua;
	}
	/* grid layout styling */
	.container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2px;
	}
	.container div {
	border: 1px solid black;
	height: 60px;
	}
	.container :first-child {
	grid-row: 1/3;
	grid-column: 1/4;
	border: 1px solid red;
	height: 120px;
	}

	/* float layout style */
	img {
	float: right;
	margin-left: 10px;
	border: 2px solid black;
	}
	section {
	display: flow-root;
	}

	/* multi column layout */
	.layout {
	column-count: 4;
	column-gap: 1px;
	}

	@media only screen and (min-width: 600px) {
	body {
	background-color: lightblue;
	}
	}
	</style>
	</head>
	<body>
	<h1>This is a Grid Layout System</h1>

	<div class="container">
	<div>one</div>
	<div>two</div>
	<div>three</div>
	<div>four</div>
	<div>five</div>
	<div>six</div>
	<div>seven</div>
	<div>eight</div>
	<div>nine</div>
	<div>ten</div>
	<div>eleven</div>
	<div>twelve</div>
	</div>

	<h1>Float Layout</h1>
	<section>
	<img src="./images/food.jpg" alt="image in week one folder" width="100px" height="100px">
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem modi, nemo natus quaerat neque, delectus eius illum corporis mollitia asperiores? Quod neque dolorum, cupiditate soluta quis in. Aliquid, temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cupiditate tempore aspernatur dolorum iusto ipsam. Enim incidunt error doloremque fuga!</p>
	</section>

	<h1>Multi-Column Layout</h1>

	<h3>Fruits</h3>
	<ul class="layout">
	<li>Cashew</li>
	<li>mango</li>
	<li>Agbalumo/Cherry</li>
	<li>Banana</li>
	<li>Apple</li>
	<li>Guava</li>
	<li>Soursop</li>
	<li>Strawberry</li>
	<li>Pine-Apple</li>
	<li>Cuccumber</li>
	<li>Pear</li>
	<li>Orange</li>
	<li>Fruit</li>
	<li>Watermelon</li>
	</ul>
	</body>
	</html>