5

Собственно, что хочу и что получаю: grid сетка

.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: start;
  }
.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article img {
  max-width: 100%;
}
.text {
  padding: 0 20px 20px;
}
.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  }
<main class="grid">
  <article>
    <img src="https://www.quackit.com/pix/samples/23m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Seamlessly visualize quality</h3>
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://www.quackit.com/pix/samples/24m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Completely Synergize</h3>
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
      <button>Here's how</button>
    </div>
  </article>
  <article>
    <img src="https://www.quackit.com/pix/samples/22l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically Procrastinate</h3>
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
      <button>Read more</button>
    </div>
  </article>
  <article>
    <img src="https://www.quackit.com/pix/samples/15l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Best in class</h3>
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
      <button>Just do it...</button>
    </div>
  </article>
  <article>
    <img src="https://www.quackit.com/pix/samples/25m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://www.quackit.com/pix/samples/16l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

Новостной сайт, такие "карточки" подгружаются постоянно при скролле главной страницы вниз. Размеры самих картинок одинаковые, а вот заголовок и описание разной длинны. От чего эти карточки больше или меньше по высоте?

2
  • 3
    Вот при такой задаче, вроде, используют flex-боксы.
    – De.Minov
    20 мар 2019 в 7:27
  • Может быть у вас есть какой-то пример? 20 мар 2019 в 7:34

1 ответ 1

5

То что вы ищите гуглится в сети по запросу Grid CSS Pinterest Layout. Добавил первый же попавшийся код для примера:

@font-face{font-family:'Calluna';
 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
	background: url(//subtlepatterns.com/patterns/scribble_light.png);
  font-family: Calluna, Arial, sans-serif;
  min-height: 1000px;
}
#columns {
	column-width: 320px;
	column-gap: 15px;
  width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}

div#columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
	width: 100%; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
	color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}
<div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
	<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
	</figure>
	
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
	<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
	</figure>
	
  <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
	<figcaption>Belle, based on 1770’s French court fashion</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
	<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
	<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
	<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
	<figcaption>Snow White, based on 16th century German fashion</figcaption>
	</figure>	
  
   <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
	<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
	</figure>
  
    <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
    <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
	</figure>	
  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
	</div>

Источник

Если допустимо использование JS, то можете также воспользоваться для удобности Masonry.

12
  • 1
    Спасибо, большое! Займусь изучением. 20 мар 2019 в 8:53
  • 1
    Но лучше использовать js Masonry 20 мар 2019 в 9:54
  • 1
    @VladimirRodichev я б только так и делал ) и указал про Mansory. Но надо было показать, что есть и другие выходы из ситуации
    – user262779
    20 мар 2019 в 9:55
  • 1
    @SoreThursday удобнее. У меня была подобная ситуация, тоже много гуглил, пробовал разные варианты, но пришёл все-таки к Mansory в моём случае. Там готовая библиотека, ничего не надо выдумывать
    – user262779
    20 мар 2019 в 9:59
  • 1
    @SoreThursday нет, не возникнут, с чего бы. Если вёрстка нормальная будет. Я в ответе написал по какому запросу гуглить, по этому запросу есть ещё и другие решения, я просто показал первое адекватное.
    – user262779
    20 мар 2019 в 10:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.