Растяжение элементов в CSS Grid - PullRequest
Новая
       13

Растяжение элементов в CSS Grid

2 голосов
/ 07 марта 2019

Я сейчас собираю жидкостную сетку.У меня проблема в том, что столбцы будут иметь переменную высоту из-за длины текста внутри них.Имея это в виду, это заставляет мои ряды растягиваться, таким образом заставляя элементы внутри них также растягиваться.В частности, синие кнопки, показанные в примере ниже, с шириной области просмотра 960 пикселей и выше.Как я могу сохранить эти элементы от растяжения и сохранить их в исходном размере? 

.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>

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Согласно комментариям к вопросу, для проблемы растяжение вы можете добавить 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>
0 голосов
/ 07 марта 2019

Вы можете использовать justify-items (например, justify-items: start;), чтобы дети не растягивались.

На CSS Grids есть действительно отличная статья / шпаргалка на css-tricks.com 

.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>
...