Grid Layout

Dette eksempel viser hvordan man kan bruge css grid til at lave et responsive layout på en webside.

Det består af et enkelt html dokument og en tilhørende css fil.

Her er den html struktur der er brugt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid layout</title>
  <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>

<div class="grid-container">
  <div class="item1"><h2>
    Header
  </h2>
  <p>Prøv at ændre i bredden på vinduet og læg mærke til hvad der sker med layoutet.</p>
</div>
  <div class="item2">
    <h2>Menu</h2>
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  </div>
  <div class="item3">
    <h2>Main</h2>
    <div class="breaking">
      <h2>Under udarbejdelse</h2>
    </div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam tenetur, quidem reiciendis itaque beatae dolores consequuntur eos fugiat iste consequatur rem molestias, exercitationem veniam nisi iure minima fuga illum ea.</p>
    <p>Quod voluptates accusantium rerum a cum, quidem modi velit voluptatum magnam corrupti repudiandae minus, eveniet ipsum sunt soluta labore aliquam possimus. Natus tempora itaque eos aliquid earum quae asperiores blanditiis!</p>
    <p>Itaque velit molestias provident amet magni voluptas, voluptatibus maxime esse. Quaerat id molestias odio dolore animi nemo, suscipit modi magnam quasi temporibus omnis sint natus ducimus dignissimos labore fugit voluptatem!</p>
    <p>Similique vitae architecto sequi error soluta nobis iste quos voluptatem expedita repudiandae numquam fugit fugiat, debitis omnis incidunt ipsam possimus sint magni quas cumque aspernatur! Voluptatem saepe sed quis corporis.</p>
  </div>  

  <div class="item4">
    <h2>Right</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, repellat. Ducimus accusamus temporibus cum perspiciatis, incidunt illo saepe error ex ad reiciendis at magni, deleniti velit in voluptatibus iusto eos.</p>
      <p>Voluptatum, dicta quis iste cumque magni harum quaerat cupiditate adipisci culpa libero quae accusantium praesentium excepturi quod eum obcaecati dolorum iusto aperiam est. Soluta, enim? Culpa autem temporibus rem eaque.</p>
      <p>Possimus animi minima aliquam molestiae laboriosam sit aliquid tenetur ut consectetur deserunt architecto, perspiciatis facere earum magnam totam minus quisquam incidunt placeat optio quidem! Minima, repellendus. Natus dolorum optio ducimus.</p>
      <p>Expedita aliquid, quam iusto voluptas totam possimus laboriosam earum fugiat ducimus, esse soluta rerum, non iure. Ex nemo animi molestias aliquid aperiam placeat ducimus qui numquam provident nostrum, magnam ipsa.</p>
  </div>
  <div class="item5"><h2>Footer</h2></div>
</div>

</body>
</html>

CSS filen ser således ud.

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer right right';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

@media only screen and (max-width: 70em) {
  .grid-container {
    background-color: rgb(10, 192, 10);
    grid-template-areas:
      'header header '
      'main main '
      'menu right'
      'footer footer';
  }
}

@media only screen and (max-width: 50em) {
  .grid-container {
    background-color: rgb(226, 45, 32);
    grid-template-areas:
      'header'
      'main'
      'menu'
      'right'
      'footer';
  }
}

.grid-container > div {
  background-color: rgba(218, 226, 231, 0.822);
  padding: 1em 1em;
  font-size: 30px;
}

.breaking {
  text-align: center;
  margin-top: 1em;
  padding: 1em;
  background-color: yellow;
  border-radius: .5em;
  -webkit-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
}

Grid Layout

Demo

Materiale

Spil