prof3ssorSt3v3/css-grid.html

## css-grid.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Grid</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css" />
    <style>
        main{
            background-color: cornflowerblue;
            color: cornsilk;

            display: grid;
            grid-template-columns: repeat(2, minmax(150px, 1fr) 2fr);
            /* grid-template-columns: 1fr 1fr 1fr; */
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }

        main > p{
            color: #333;
            background-color: #fff;
            padding: 0.5rem 1rem;

            display: flex;
            justify-content: center; /* horizontal */
            align-items: flex-start;   /* vertical */
        }

        p:nth-of-type(1){
/*            grid-column-start: 1;*/
/*            grid-column: 2 / span 2;*/
/*            grid-column-end: 3;*/
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS Grid</h1>
    </header>
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nemo odit eaque natus in, facilis earum delectus dolorum aperiam, eos obcaecati debitis cumque a voluptatibus! Facilis doloremque hic, possimus illum?</p>
        <p>Officiis voluptates voluptatem adipisci totam unde quisquam sequi vero ipsum earum error quasi nam id est, neque reiciendis recusandae asperiores accusantium repellat, ab debitis obcaecati sapiente. Odio sapiente repellat vel.</p>
        <p>Obcaecati asperiores nemo delectus numquam repellendus nam excepturi tenetur dignissimos officiis sapiente aspernatur consequatur reprehenderit, molestias earum, vel cumque. Cum quasi hic, accusantium. Eos mollitia, libero repudiandae ipsum consectetur. Quae!</p>
        <p>Aliquid laboriosam illum sint. Vel dolor recusandae accusantium, possimus, fugit distinctio, earum eum pariatur necessitatibus quod minima molestiae rem fugiat voluptate! Nisi eaque nobis, voluptatem eligendi et voluptas consequuntur asperiores?</p>
    </main>
    <footer>
        <p>&copy; 2018 Turkey Stuff Inc.</p>
    </footer>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS Grid</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css" />
	<style>
	main{
	background-color: cornflowerblue;
	color: cornsilk;

	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr) 2fr);
	/* grid-template-columns: 1fr 1fr 1fr; */
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	}

	main > p{
	color: #333;
	background-color: #fff;
	padding: 0.5rem 1rem;

	display: flex;
	justify-content: center; /* horizontal */
	align-items: flex-start; /* vertical */
	}

	p:nth-of-type(1){
	/* grid-column-start: 1;*/
	/* grid-column: 2 / span 2;*/
	/* grid-column-end: 3;*/
	}
	</style>
	</head>
	<body>
	<header>
	<h1>CSS Grid</h1>
	</header>
	<main>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nemo odit eaque natus in, facilis earum delectus dolorum aperiam, eos obcaecati debitis cumque a voluptatibus! Facilis doloremque hic, possimus illum?</p>
	<p>Officiis voluptates voluptatem adipisci totam unde quisquam sequi vero ipsum earum error quasi nam id est, neque reiciendis recusandae asperiores accusantium repellat, ab debitis obcaecati sapiente. Odio sapiente repellat vel.</p>
	<p>Obcaecati asperiores nemo delectus numquam repellendus nam excepturi tenetur dignissimos officiis sapiente aspernatur consequatur reprehenderit, molestias earum, vel cumque. Cum quasi hic, accusantium. Eos mollitia, libero repudiandae ipsum consectetur. Quae!</p>
	<p>Aliquid laboriosam illum sint. Vel dolor recusandae accusantium, possimus, fugit distinctio, earum eum pariatur necessitatibus quod minima molestiae rem fugiat voluptate! Nisi eaque nobis, voluptatem eligendi et voluptas consequuntur asperiores?</p>
	</main>
	<footer>
	<p>© 2018 Turkey Stuff Inc.</p>
	</footer>
	</body>
	</html>