Создание grid сетки с разной высотой

#css #css3 #вёрстка #css_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%;
  }

  

    
    

      
Seamlessly visualize quality
      
Collaboratively administrate empowered markets via plug-and-play networks.
      
    
  
  

    
    

      
Completely Synergize
      
Dramatically engage seamlessly visualize quality intellectual capital without
superior collaboration and idea-sharing.
      
    
  
  

    
    

      
Dynamically Procrastinate
      
Completely synergize resource taxing relationships via premier niche markets.
      
    
  
  

    
    

      
Best in class
      
Imagine jumping into that boat, and just letting it sail wherever the wind
takes you...
      
    
  
  

    
    

      
Dynamically innovate supply chains
      
Holisticly predominate extensible testing procedures for reliable supply
chains.
      
    
  
  

    
    

      
Sanity check
      
Objectively innovate empowered manufactured products whereas parallel platforms.
      
    
  





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

Ответы

Ответ 1

То что вы ищите гуглится в сети по запросу 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%; }
}

  

  
	
Cinderella wearing European fashion of the mid-1860’s
	
	
	

	
	
Rapunzel, clothed in 1820’s period fashion
	
	
  

	
	
Belle, based on 1770’s French court fashion
	
  
	

	
	
Mulan, based on the Ming Dynasty period
	
	
   

	 
	
Sleeping Beauty, based on European fashions in 1485
	
	
   

	 
	
Pocahontas based on 17th century Powhatan costume
	
  
	

	
	
Snow White, based on 16th century German fashion
	
	
  
   

	
	
Ariel wearing an evening gown of the 1890’s
	
  
    

	
    
Tiana wearing the robe de style of the 1920’s
	
	
  Art © Claire Hummel
	




Источник  

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