davidvandenbor/basic-css-grid-example-study-of-grid-lines.markdown

## basic-css-grid-example-study-of-grid-lines.markdown

      
    Raw
  

              basic-css-grid-example-study-of-grid-lines.markdown
            
          
    Basic CSS Grid example, study of grid lines

See the code preview here
The full page preview here: https://bl.ocks.org/davidvandenbor/raw/94973470a99d843d008631af6cf6014e/?raw=true
This is the layout that we're trying to build:


## css-grid-layout-example.gif

      
    Raw
  

              css-grid-layout-example.gif
            
          
## 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>

## 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
	}