This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 8 months ago.
I want to move element to up like in photo in attachment. which code I should write to my css ?
here is photo of my code
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
display: flex;
width: 1200px;
margin: 50px auto;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
background-color: aquamarine;
}
.container__item{
width: 350px;
/* height: 100%; */
background-color: #fff;
}
[class*="image"]{
width: 350px;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>
I already tried justify-content: flex-start; and align-items: flex-start; but they didn't help for this example. Maybe I have another problem ? I can't solve it. I try to solve it about two days :D I can't find answer for this. Please somebody help to solve this exercise.
Check this. You can use display:grid to check it out.
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
width: 1200px;
margin: 50px auto;
column-count: 4;
column-gap: 5px;
}
.container__item{
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 0px;
break-inside: avoid;
}
[class*="image"]{
width: 100%;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>
Related
Let's say I have 3 divs...
HTML:
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
CSS:
.section {
display: flex;
flex-wrap: wrap;
}
So what I want is to make these items wrap on only one column when I reduce my screen size...
The current behavior is like this on medium screen size
I want the behavior to be like this in all other screen sizes
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
</section>
CSS - I have used flexbox
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.features {
display: flex;
flex-wrap: wrap;
}
.features .item {
/*flex: 0 0 100%;*/ /*remove if you don't want media query*/
max-width: 384px;/*add if you don't want media query*/
width: 100%;/*add if you don't want media query*/
padding: 0 1rem;
margin-bottom: 1rem;
}
/*remove if you don't want media query*/
/*#media (min-width: 768px) {
.features .item {
flex: 0 0 33.33%;
}
}*/
You can call that on media query Are you trying to do something like this??Let me know
section.features {
display: flex;
justify-content:space-around;
padding:10px;
}
#media only screen and (max-width:768px){
section.features {display: grid;}
}
RESIZE ME
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`
Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>
Answer from #nagendraNag is ideal. I would just remove the max-width
max-width: calc(50% - 40px);
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The 4 divs have a width of 23% and are displayed inline-block, they have a height of 220px and margin 0. The issue is that they are not horizontally aligned
I tried to change the height and width already and removed the margin but that does not fix it.
It looks like this...
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
Give vertical-align:top; to .aside-column class.
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
vertical-align:top;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
You can also use a parent container which is a flexbox.
.container {
display: flex;
}
.aside-column {
width: 23%;
height: 220px;
margin: 1%;
}
<div class="container">
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
</div>
This is the html file:
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I want to set the all text centered of individual div height. Means first the text of h1 will appear and just below of it the text of paragraph tag will appear. the space from upper portion to h1 tag and the space from ending of p tag to lower portion have to same.
I am newbie.please help me.
This should work for you. Hope it helps!
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
position: relative;
top: -60px;
left: 250px;
}
p {
padding: inherit;
margin: inherit;
position: relative;
top: 60px;
right: 480px;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I wonder if there is the way to create css-rules to display the articles in three columns as shown (http://i.stack.imgur.com/XRSGs.png). Preferred HTML markup is:
<div>1</div>
<div>2</div>
<div>3</div>
...
<div>6</div>
The only condition is to avoid additional manipulations with html-markup during the render - no nested blocks and so on. Any ideas?
Please see the code at JSFiddle: jsfiddle.net/3nv7rkcg
Its very difficult to make from css and it can't be dynamic. So please better to use js http://isotope.metafizzy.co/ .
Now we can make it from css too :)
Here is the code
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
article {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: #efefef;
}
p {
margin: 1rem 0;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
</section>
<section>
<p>Lorem ipsum dolor sit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</section>
</article>