Блог

Главная - Вопросы по программированию - CSS grid — макет с двумя столбцами (заголовок и описание)

CSS grid — макет с двумя столбцами (заголовок и описание)

#css #css-grid

#css #css-сетка

Вопрос:

Вот что у меня есть на данный момент:

 .card {
  padding: 1rem;
  height: auto;
}

.cards {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cardTitle {
  color: red;
  font-size: 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.cardDescription {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

@media (min-width: 768px) {
  .cardTitle {
    text-align: right;
  }
  .cardDescription {
    text-align: left;
  }
} 
 <div class="cards">
  <div class="card cardTitle">Title one</div>
  <div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title two</div>
  <div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title three</div>
  <div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title four</div>
  <div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title five </div>
  <div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

На рабочем столе это нормально, но на небольших представлениях, таких как мобильные, я бы хотел расположить заголовок и описание близко друг к другу, чтобы разрыв между заголовком и описанием был близок, но разрыв каждой строки оставался неизменным. Вот так:
введите описание изображения здесь

Каков наилучший способ добиться этого? Является ли grid правильным подходом к этому?

Ответ №1:

Вы можете сделать так:

Используйте только display: grid; на рабочем столе, а затем используйте a margin-bottom для управления пространством. 😊

 .cards {
  max-width: 640px;
  margin: 0 auto;
  grid-gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cardTitle {
  color: red;
  font-size: 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.cardDescription {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cards {
    display: grid;  
  }
  
  .cardTitle {
    text-align: right;
  }
  .cardDescription {
    text-align: left;
  }
} 
 <div class="cards">
  <div class="card cardTitle">Title one</div>
  <div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title two</div>
  <div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title three</div>
  <div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title four</div>
  <div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="card cardTitle">Title five </div>
  <div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>