grid-intro/placed.html

<html>
<head>
  <title>CSS LU_12</title>
  <meta charset="UTF-8"/>
  <link href="../shared.css" type="text/css" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

<main>
  <nav>
    <a href="../index.html">« Home</a>
    <a href="basic.html">Basic</a>
    <a href="areas.html">Areas</a>
    <a href="placed.html">Placed</a>
  </nav>

  <h1>Grid with placed items</h1>

  <h2>Ordered ascending</h2>
  <div class="wrapper grid--placed">
    <div class="box box--placed-1">1</div>
    <div class="box box--placed-2">2</div>
    <div class="box box--placed-3">3</div>
    <div class="box box--placed-4">4</div>
    <div class="box box--placed-5">5</div>
    <div class="box box--placed-6">6</div>
  </div>

  <h2>Alternatively ordered and spanned</h2>
  <div class="wrapper grid--placed">
    <div class="box box--placed-1a">1</div>
    <div class="box box--placed-2a">2</div>
    <div class="box box--placed-3a">3</div>
    <div class="box box--placed-4a">4</div>
    <div class="box box--placed-5a">5</div>
    <div class="box box--placed-6a">6</div>
  </div>

</main>

</body>
</html>