Use the CSS grid to sort random lists into different columns / rows.

I’m trying to use the CSS grid to sort a random list into three columns (the first grid in the snippet), and then one from the list by defining the grid template areas (the second grid in the snippet). Move item to separate row. .

include. grid-template-areas Causes all links with grid-area: main-links Pile up

Is it compatible with the CSS grid without touching the HTML structure, or will it require the use of a sub-grid that is only available in Firefox?

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 3rem 0.75rem;
  background-color: #f0f0f0;
  list-style-type: none;
  margin-bottom: 40px;
  padding: 10px;
}

.grid--areas {
  grid-template-areas:
    "main-links main-links main-links"
    "extra-links extra-links extra-links";
}

.grid--areas li {
  grid-area: main-links;    
}

.grid--areas .extra-link {
  grid-area: extra-links;
}
<h3>Grid without template-areas</h3>
<p>Links in three columns</p>
<ul class="grid list-unstyled">
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
  <li>Link 5</li>
  <li>Link 6</li>
  <li>Link 7</li>
  <li>Link 8</li>
  <li>Link 9</li>
  <li>Link 10</li>
  <li class="extra-link">Extra link</li>
</ul>

<h3>Grid with template-areas</h3>
<p>Links should be in three columns with an extra link on a separate row</p>
<ul class="grid grid--areas list-unstyled">
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
  <li>Link 5</li>
  <li>Link 6</li>
  <li>Link 7</li>
  <li>Link 8</li>
  <li>Link 9</li>
  <li>Link 10</li>
  <li class="extra-link">Extra link</li>
</ul>

Write a Comment

Your email address will not be published. Required fields are marked *