Question

我目前正在整理一个流体网格。我遇到的问题是，由于其中的文本长度，列的高度将可变。考虑到这一点，它使我的行伸展，从而使其中的元素也伸展。更具体地说，下例中显示的蓝色按钮的视口宽度为960px以上。如何防止这些元素拉伸并保持其原始尺寸？

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}

<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

Answer 1

您可以使用justify-items（如justify-items: start;）来阻止孩子们伸展。

https://github.com/pxb1988/dex2jar/blob/2.x/dex-tools/src/main/java/com/googlecode/dex2jar/tools/ClassVersionSwitch.java上有一篇关于CSS网格的很棒的文章/速查表

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  justify-items: start;
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}

<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

Answer 2

根据对问题的评论，对于 stretching 问题，您可以将align-items: flex-start添加到grid类中-请参见下面的演示

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: flex-start; /* ADDED */
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}

<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

CSS网格中的元素拉伸

2 个答案: