mikejavier
12/5/2016 - 10:57 AM

CSS Grid Layout example

CSS Grid Layout example

style.css
content_copyfile_download
/* Reset */

*, *:before, *:after{
	box-sizing: border-box;
}
body {  
  margin: 0 auto;
  background-color: #f4f4f4;
}
nav a {
	display: block;
	margin-bottom: .5em;
}


/* Estilizando as areas */

.header { background-color: #0D47A1; padding: 1.2em;}
.footer { background-color: #2196F3; padding: 1.2em;}
.sidebar { background-color: #ccc; padding: 1.2em;}
.main { background-color: #fff; padding: 1.2em;}


/* Utilizando CSS Grid Layout */

.wrap {
	/*
	*
	* Definimos nosso wrap para receber o grid;
	*/
	display: grid;


	/* 
	*
	* Será criado um grid de 2x3
	* 2 colunas: 1º de 200px e a 2º ocupando o restante do espaço
	*/
	grid-template-columns: 200px 1fr;


	/* 
	*
	* 3 filas altura automatica
	*/
	grid-template-rows: auto auto auto;
}

.header,
.footer {
	grid-column-start: 1;
	grid-column-end: 3;
}

.header {
  grid-row: 1;
  margin-bottom: 2em;
}

.footer {
  grid-row: 3;
  margin-top: 2em;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
  margin-right: 2em;
}

.main {
  grid-column: 2;
  grid-row: 2;
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Experimento CSS Grid Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <header class="header">
          <h2>Este é o Header</h2>
        </header>

        <main class="main">
          <h2>Main</h2>
          <h4>Aqui vai nosso conteudo principal do site</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni sit nisi alias tenetur, ullam laborum amet, ipsa sequi, aliquid quaerat tempora suscipit optio quisquam rem a accusantium dignissimos pariatur itaque, molestias aperiam minus eos! Aliquam praesentium iusto, quisquam quo, laborum vitae quaerat quia qui sapiente minima, nisi eaque magni accusamus molestias harum distinctio aspernatur officiis quibusdam aliquid quasi cum doloribus repudiandae exercitationem. Harum, omnis, tenetur eius, velit error cum iure facere dolorum, maxime vero dignissimos ipsa similique atque vitae neque iusto dolor! Porro reiciendis nesciunt magni beatae reprehenderit earum nulla, consectetur rerum vero laborum eveniet expedita similique quo, exercitationem delectus corporis! Eaque voluptatum architecto doloremque dolore iusto commodi! Harum sapiente, minus nam totam quam assumenda? Dolor non est reprehenderit quidem officia odit laborum omnis quaerat hic similique atque, autem nobis ex amet adipisci illo repellat consequatur. Sint aspernatur autem dolor consequatur eligendi veniam quos tempore, ipsam maiores ipsa eum sapiente perspiciatis molestiae consequuntur officia nostrum quod voluptas! Facilis aspernatur itaque ea, eveniet blanditiis libero dolore et temporibus architecto, vel consectetur cum fuga eum aperiam ut animi nam repellat distinctio, iste earum quibusdam doloremque quidem! Delectus quia, nulla tenetur impedit nostrum! Tempora repellendus ullam facilis consequuntur officia quas fugiat iusto ratione eaque ex aliquam, sunt nemo veritatis culpa explicabo quidem repellat labore soluta ad, omnis debitis magnam tenetur. Consequuntur, perspiciatis, sint. Aliquid unde ea, earum architecto, quos cumque cupiditate, deserunt sunt amet officiis itaque fuga. Veniam obcaecati officiis minus aspernatur, libero quod aperiam deserunt, sint assumenda alias, perferendis nemo similique, expedita dolorum ut ducimus voluptatum rem distinctio. Ab enim quasi molestiae, dolores aperiam unde tempora esse hic iusto labore blanditiis inventore beatae quod itaque quos! Vero autem laboriosam harum sit illum debitis doloribus laborum incidunt tempore officia sunt excepturi officiis, distinctio voluptate minus quas laudantium blanditiis maxime nisi ullam explicabo, tenetur.</p>
        </main>

        <aside class="sidebar">
          <h2>Menu</h2>
          <nav>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
          </nav>
        </aside>

        <footer class="footer">
          <h2>Footer</h2>
        </footer>
    </div>
</body>
</html>