whittfield
8/25/2018 - 1:56 PM

5 Column Responsive Grid

Takes and unordered list of 5 items and makes a responsive grid with 2 rows.

ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 1em 4em;  
  padding: 0 1em;
}
li {
  list-style: none;
  text-align: center;
  
  grid-column-end: span 2;
}
li::before {
  content: "✨";
  display: block;
}
li:first-child {
  grid-column-start: 2;
}