在CSS网格中拉伸的元素

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

根据对问题的评论，对于拉伸问题，您可以将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>

Answer 2

您可以使用justify-items（如justify-items: start;）让孩子不要伸展。

在css-tricks.com上的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>