Grid layout breadcrumb

by Corentin Ballot

HTML

<div>
<ul class="breadcrumb">
<li class="breadcrumb_item">HOME</li>
<li class="breadcrumb_item">Documents</li>
<li class="breadcrumb_item">Projets</li>
<li class="breadcrumb_item">WEB</li>
<li class="breadcrumb_item">NodeJS</li>
<li class="breadcrumb_item">Cloud</li>
<li class="breadcrumb_item">Controllers</li>
<li class="breadcrumb_item">Security</li>
</ul>
</div>

CSS

.breadcrumb {
  display: grid;
  grid-template-columns: min-content;
  grid-auto-columns: minmax(3rem, min-content);
  grid-auto-flow: column;
  border: 5px solid red;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.breadcrumb_item {
  padding: .5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  justify-self: stretch;
  overflow: hidden;
}

.breadcrumb_item:last-child {
  
}