The number of columns exceeded on the page, and the column width is ignored

Question

Thanks to the help I received on a previously asked question, I decided to use the column structure for my web page. It seemed simple to declare multiple columns to use, but I was stuck with exceeding my column.

For example, I want 3 columns, but I end up with 4.

I tried adding column-width, and this is simply ignored when rendering the page.

I tried setting the width 700pxbecause 4 700pxcolumns would not fit on my screen; the width was ignored, so that didn't help.

Preferably, I would just like to set the column width and allow the page to adapt to different screen sizes, so that the large screen (much larger than my small laptop) will not be limited to only three columns.

Setting the absolute maximum number of columns would be a less than ideal solution. Can anyone help?

.masonry-brick {
	display: inline-block;
	width: 100%;
	margin: 1em 1em 1em 1em;
}

.masonry-brick img {
	max-height: 100%;
	max-width: 100%;
}

.container {
	-webkit-column-count: 3;
        -moz-column-count: 3;
         column-count: 3
	-webkit-column-width: 700px;
        -moz-column-width: 700px;
	column-width: 700px;
	display: flex;
}

.title {
	height: 30em;
	width: 30em;
	padding: 1em;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;	
	text-align: center;
}

.red {
	background-color: rgba(255, 63, 63, 0.8);
}

<div class="container">
		
    <div class="masonry-brick title red center">
        <h1><b>Projects - Front End</b></h1>
    </div>
		
    <div class="masonry-brick">
        <img src="https://pixy.org/images/placeholder.png">
    </div>
			
    <div class="masonry-brick">
        <img src="https://pixy.org/images/placeholder.png">
    </div>

    <!-- This should be displayed in the first column as the page should have 3 columns -->
    <div class="masonry-brick title red center">
        <h1><b>Project - Back End</b></h1>
    </div>
</div>

Run codeHide result

Viewing the result of a fragment in full-screen mode gives a good idea of ​​what is happening.

Answer 1

.masonry-brick {
    width: 95%;
    margin: 1em 0;
    break-inside: avoid-column;
}

.container {
    column-count: 3;
    column-gap: 0;
    column-fill: balance;
}

.masonry-brick img {
    width: 100%;
}

.title {
    height: 25vw;
}

.center {	
	text-align: center;
}

.red {
	background-color: rgba(255, 63, 63, 0.8);
}

<div class="container">
            <div class="masonry-brick title red center">
				<h1><b>Projects - Front End</b></h1>
			</div>
            
            <div class="masonry-brick title red center">
				<h1><b>Projects - Front End</b></h1>
			</div>
            
            <div class="masonry-brick">
				<img src="https://pixy.org/images/placeholder.png">
			</div>
            
            <div class="masonry-brick">
				<img src="https://pixy.org/images/placeholder.png">
			</div>
			
			<div class="masonry-brick">
				<img src="https://pixy.org/images/placeholder.png">
			</div>
			
      <!-- This should be displayed in the first column as the page should have 3 columns -->
			<div class="masonry-brick title red center">
				<h1><b>Project - Back End</b></h1>
			</div>
</div>

Run codeHide result

I noticed that after there was column-count: 3no semicolon. In addition, you can use break-inside: avoidto save individual columns.

, . display: flex display: inline-block , , .

, , , Friso Van Dijk answer .

Answer 2

. , , 3 .
, , columns: 200px 3;. 3 700 . , 2 1920x1080, , ( , > 25% , ).

, <!-- This should be displayed in the first column as the page should have 3 columns -->. . , , , , , , .

. display: inline-block;, break-inside: avoid;, .

, . , . !

.masonry-brick {
	display: inline-block;
	margin: 1em 1em 1em 1em;                  
}

.masonry-brick img {
	max-height: 100%;
	max-width: 100%
}

.container {
-webkit-columns: 250px;
   -moz-columns: 250px;
        columns: 250px;
        
  -webkit-column-rule: 4px dotted blue;
     -moz-column-rule: 4px dotted blue;
          column-rule: 4px dotted blue;
}

.title {
	height: 30em;
	padding: 1em;
}

.center {
	display: flex;
	align-items: center;
	text-align: center;
}

.red {
	background-color: rgba(255, 63, 63, 0.8);
}

<div class="container">
		
			<div class="masonry-brick title red center">
				<h1><b>Projects - Front End</b></h1>
			</div>
		
			<div class="masonry-brick">
				<img src="https://pixy.org/images/placeholder.png">
			</div>
			
			<div class="masonry-brick">
				<img src="https://pixy.org/images/placeholder.png">
			</div>
			
      <!-- This should be displayed in the first column as the page should have 3 columns -->
			<div class="masonry-brick title red center">
				<h1><b>Project - Back End</b></h1>
			</div>
</div>

Hide result