Столбец столбцов вертикального переполнения

Question

Я пытаюсь упорядочить изображения по-столбцам, используя столбцы CSS в относительно фиксированном div. Я хочу, чтобы div прокручивался вертикально, но когда он достигает максимального доступного вертикального пространства, он создает новые столбцы справа, заставляя div прокручивать по горизонтали, а не поддерживать 3 предназначенных столбца и переполняться вертикально. любая идея о том, как ее исправить?

body { 
 
     background-color: white; 
 
     width:100%; 
 
     height:100%; 
 
     position:absolute; 
 
     font-family: "ff-tisa-web-pro",serif; 
 
     font-size: 16px; 
 
     font-weight: 400; 
 
     line-height: 1.45; 
 
     color: #333; 
 
     background: rgba(200,125,06,0.5) 
 
    } 
 

 
    .grid { 
 
     position:relative; 
 
     height:80%; 
 
     -webkit-columns: 150px; 
 
     -moz-columns: 3 150px; 
 
     columns: 3 150px; 
 
     width:40%; 
 
     margin:auto; 
 
     overflow: auto; 
 
     background: rgba(200,125,06,0.5); 
 
     break-inside: avoid; 
 
    } 
 
    .grid img{ 
 
    width:100%; 
 
    }

<div class="grid"> 
 
     <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/> 
 
     <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/> 
 
     <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/> 
 
     <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/> 
 
     <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/> 
 
     <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/> 
 
     <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/> 
 
     <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/> 
 
     <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/> 
 
     <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/> 
 
    </div>

Answer 1

Попробуйте с 1 колонкой подсчета и как текст получить больше доступной высоту он будет автоматически разбит на вторую колонку - columns: 1 150px;

body { 
 
    background-color: white; 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    font-family: "ff-tisa-web-pro",serif; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    line-height: 1.45; 
 
    color: #333; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    background: rgba(200,125,06,0.5) 
 
    } 
 

 
    article { 
 
    position:relative; 
 
    height:70%; 
 
    -webkit-columns: 150px; 
 
    -moz-columns: 1 150px; 
 
    columns: 1 150px; 
 
    padding:1em; 
 
    width:40%; 
 
    margin:auto; 
 
    overflow: scroll; 
 
    background: rgba(200,125,06,0.5) 
 
    }

<article> 
 
    At noon they sat down by the roadside, near a little brook, and Dorothy opened her basket and got out some bread. She offered a piece to the Scarecrow, but he refused. 
 
    I am never hungry,&rdquo; he said, &ldquo;and it is a lucky thing I am not, for my mouth is only painted, and if I should cut a hole in it so I could eat, the straw I am stuffed with would come out, and that would spoil the shape of my head.&rdquo; 
 
    Dorothy saw at once that this was true, so she only nodded and went on eating her bread. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner. So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz. 
 
    </article>

Answer 2

Посмотрим, поможет ли это вам.

body { 
 
     background-color: white;  
 
     height:100%; 
 
     position:absolute; 
 
     font-family: "ff-tisa-web-pro",serif; 
 
     font-size: 16px; 
 
     font-weight: 400; 
 
     line-height: 1.45; 
 
     color: #333; 
 
     background: rgba(200,125,06,0.5) 
 
    } 
 

 
    .grid { 
 
     position:relative;  
 
     -webkit-columns:3 150px; 
 
     -moz-columns: 3 150px; 
 
     columns: 3 150px;  
 
     margin:auto; 
 
     overflow: auto; 
 
     background: rgba(200,125,06,0.5); 
 
     break-inside: avoid; 
 
    } 
 
    .grid img{ 
 
    width:100%; 
 
    }

<div class="grid"> 
 
     <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/> 
 
     <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/> 
 
     <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/> 
 
     <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/> 
 
     <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/> 
 
     <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/> 
 
     <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/> 
 
     <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/> 
 
     <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/> 
 
     <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/> 
 
    </div>