CSS GRID UNWANTED WHITESPACE IN CHILD ITEMS

Viewed 14

I am trying to keep the amount of white space for the child elements to be consistent, currently when a sibling element has more content there is added whitespace to all of them which I dont want. I want them to have 15px under each

  • images for referance and code below

    enter image description here

    [enter image description here]

    enter image description here

    
      &__list {
        list-style-type: none;
        padding: 0;
        width: 100%;
        font-family: $ceraProRegular;
    
        @include breakpoint($large-tablet) {
          display: grid;
          grid-auto-flow: column;
          grid-template-rows: repeat(6, 1fr);
          grid-template-columns: repeat(4, 25%);
          align-items: center;
        }
    
        li {
          margin: 1.5rem 0;
          width: 180px;
    
          @include breakpoint($large-tablet) {
            margin: 0;
            min-height: 3rem;
          }
    
          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    
  • 0 Answers
    Related