{% extends '@ChillMain/layout.html.twig' %}

{% block title %}
  SASS Assets Tests - page 2
{% endblock %}

{% block css %}
{% endblock %}

{% block content %}
<div class="col-md-10">
<h1>CSS Tests - page 2: grid layout</h1>

<h2>1) mgrid 1-2: avec grid-column et grid-row</h2>

<div class="mgrid debug">
  <div class="area1">
    Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
  </div>
  <div class="area2">
    <ul class="record_actions">
      <li><button type="button" name="button">Annuler</button></li>
      <li><button type="button" name="button">Voir</button></li>
      <li><button type="button" name="button">Enregistrer</button></li>
    </ul>
  </div>
</div>

<h2>2) lgrid 3-4: avec grid-template-areas</h2>

<div class="lgrid debug">
  <div class="area3">
    <i>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité).
    [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</i>
    Voir sur MDN: <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#occuper_plusieurs_cellules">Définir des zones sur une grille</a>

  </div>
  <div class="area4">
    <ul class="record_actions">
      <li><button type="button" name="button">Annuler</button></li>
      <li><button type="button" name="button">Voir</button></li>
      <li><button type="button" name="button">Enregistrer</button></li>
    </ul>
  </div>
</div>

<h2>3) cgrid 5-6-7-8: avec masonry</h2>
<p>Expérimental: dans FF <i>about:config</i>, il faut mettre <i>layout.css.grid-template-masonry-value.enabled = true</i></p>

<div class="cgrid debug">
  <div class="item">
    1 Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
  </div>
  <div class="item">
    2 Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
  </div>
  <div class="item">
    3 Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
  </div>
  <div class="item">
    4 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
  </div>
  <div class="item">
    5 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan.
  </div>
  <div class="item">
    6 Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim.
  </div>
  <div class="item">
    7 Proin hendrerit arcu velit, eu ultrices dui interdum eget.
  </div>
  <div class="item">
    8 Eu ultrices dui interdum eget.
  </div>
</div>

</div>
{% endblock %}