davidvandenbor · January 30, 2022 22:59
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
diff --git a/css-grid-layout-example.gif b/css-grid-layout-example.gif
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Grid example, exercise using grid lines!</title>
 </head>

 <body>

    <main>
        <header>
            <h2>header</h2>
        </header>
        <article>
            <h2>article</h2>
        </article>
        <aside>
            <h2>aside</h2>
        </aside>
        <footer>
            <h2>footer</h2>
        </footer>
    </main>

    <p>
        Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
    </p>
    <img src="css-grid-layout-example.gif" class="example-image" alt="">
 </body>

 </html>
diff --git a/style.css b/style.css
 main {
 	max-width: 700px;
 	margin: 20px auto 10px auto;
 	display: grid;
 	/* 
 	below: fr stands for "fraction" you can also use %, 
 	like so: 25% 25% 25% 25%. And also: 
 	"50% 25% 25%" is the SAME as: "2fr 1fr 1fr"
 	*/
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 	grid-template-rows: 100px 400px 100px;
 	/* the 400px height is just as an preview example, don't forget to set it to "auto" if the content height in the orange <section> is variable!  */
 	grid-gap: 20px; /* you can also set this to zero for a seamless grid!! */
 }

 header {
 	background: violet;
 	grid-column: 1/5; /* grid lines indicating how many columns to span horizontally! */
 }

 article {
 	background: orange;
 	grid-column: 1/4;
 }

 aside {
 	background: green;
 	grid-column: 4/5;
 }

 footer {
 	background: red;
 	grid-column: 1/5;
 }

 * {
 	text-align: center;
  font-family:serif
 }

 p {
  margin-top:50px;
 }

 .example-image {
  max-width: 806px;
  width:100%;
  height:auto
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>CSS Grid example, exercise using grid lines!</title>
	</head>

	<body>

	<main>
	<header>
	<h2>header</h2>
	</header>
	<article>
	<h2>article</h2>
	</article>
	<aside>
	<h2>aside</h2>
	</aside>
	<footer>
	<h2>footer</h2>
	</footer>
	</main>

	<p>
	Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
	</p>
	<img src="css-grid-layout-example.gif" class="example-image" alt="">
	</body>

	</html>
	main {
	max-width: 700px;
	margin: 20px auto 10px auto;
	display: grid;
	/*
	below: fr stands for "fraction" you can also use %,
	like so: 25% 25% 25% 25%. And also:
	"50% 25% 25%" is the SAME as: "2fr 1fr 1fr"
	*/
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 100px 400px 100px;
	/* the 400px height is just as an preview example, don't forget to set it to "auto" if the content height in the orange <section> is variable! */
	grid-gap: 20px; /* you can also set this to zero for a seamless grid!! */
	}

	header {
	background: violet;
	grid-column: 1/5; /* grid lines indicating how many columns to span horizontally! */
	}

	article {
	background: orange;
	grid-column: 1/4;
	}

	aside {
	background: green;
	grid-column: 4/5;
	}

	footer {
	background: red;
	grid-column: 1/5;
	}

	* {
	text-align: center;
	font-family:serif
	}

	p {
	margin-top:50px;
	}

	.example-image {
	max-width: 806px;
	width:100%;
	height:auto
	}