css 5列响应网格

Posted 2021-05-13

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;
}