Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives.
I am trying to use column count, which appears to be working but not as expected.
So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example:
http://jsfiddle.net/DTcHh/3858/
#builds {
width: 100%;
}
.cols {
-moz-column-count:4;
-moz-column-gap: 3%;
-moz-column-width: 25%;
-webkit-column-count:4;
-webkit-column-gap: 3%;
-webkit-column-width: 25%;
column-count: 4;
column-gap: 3%;
column-width: 25%;
}
.item {
height: auto;
width: 100%;
}
I am using pagination for the items from a database, and sometimes everything works fine but others it doesn't.
Any logic as to why / what im doing wrong?
I think this is that you need
.items {
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
Related
I'm using a feature query, my goal is to display grid on all browsers except IE. IE doesn't support feature queries, so all code in the feature query will be ignored.
It's working for me in IE, but on Chrome/all other browsers the code outside of the feature query is applying styles, but the feature query is still working like it's displaying grid, but also taking the margin/padding from the code outside of the feature query. Is there a way around this?
feature query
#supports(grid-auto-rows:auto){
.Gallery{
display:-ms-grid;
display:grid;
grid-gap: 5px;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
grid-auto-rows:95px;
grid-auto-flow: dense;
}
.horiz{
-ms-grid-column-span: 2;
grid-column: span 2;
}
.vert{
-ms-grid-row-span: 2;
grid-row: span 2;
}
.big{
-ms-grid-column-span:2;
grid-column:span 2;
-ms-grid-row-span: 2;
grid-row: span 2;
}
.imgContainer {
width: 100%;
height: 100%;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
styles outside of the feature query that's being applied
.Gallery {
display: flex;
flex-wrap: wrap;
margin: -1em 0 1em -0.5em;
}
.img {
padding: 1em 0 0 0.5em;
flex: 1 0;
min-width:100%;
height:100%;
}
I am modifying a pinterest clone script and working on replacing jquery masonry with css masonry, i think have added css values properly, but the masonry is still breaking a bit, can you guys please take a look and let me know what i might be doing wrong?
CSS thats making the masonry work is listed below,
Code:
#grid-container {
max-width:1200px;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
margin: 176px auto 0;
}
#grid-container > .post {
width: 290px;
margin: 0 5px 0;
position: relative;
display: block;
height: auto;
}
Live URL : http://labs.imvges.xyz/
Regards,
Jqn
Setting column-count to 4 will ensure there are always 4 columns, instead of showing the max number of columns based on the post card widths. Use column-width instead. See below for that change and a few others.
#grid-container {
max-width:1200px;
-moz-column-width: 288px;
-webkit-column-width: 288px;
column-width: 288px;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
margin: 176px auto 0;
}
#grid-container > .post {
width: 100%;
margin: 0 5px 0;
display: inline-block;
height: auto;
}
I encounter this layout issue a lot:
Small screens - items are stacked in a single row, usually an image followed by some text, then a smaller sub-area for extra miscellaneous:
Medium screens and up - items are reshuffled to 2 columns, image and misc stuff on the left, text on the right:
I feel like I should be able to do this with flexbox, but I can't figure out how. I get that I can arrange the items in columns using:
.container {
display: flex;
flex-flow: column wrap;
}
.one,
.two,
.three {
width: 50%;
}
.one {
order: 1;
}
.two {
order: 3;
}
.three {
order: 2;
}
But the problem is there doesn't seem to be a way to break the items into 2 columns without setting a fixed height, which obviously doesn't work too well for responsive.
Is there a way to force the columns to break at certain points?
You can do it like this. By making width 100% at mobile size. they take up their own line.
.container {
width: 75%;
margin: 0 auto;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: blue;
float:left;
}
.box2 {
background-color: green;
float: right;
}
.box3 {
background-color: purple;
float: left;
}
#media screen and (max-width: 800px) {
.box2 {
float: left;
}
.box1,.box2,.box3 {
width: 100%;
}
}
JSFIDDLE
I need some help with a problem.
There is a list in the block certain height. Height more than the height of the list, so it is displayed in 2 columns.
I did not get to do so at first filled the first column of the list items, then the second. it looks like this
css
.wrap{
}
.wrap ol{
height: 290px;
width: 500px;
display: block;
outline: 1px solid red;
overflow: hidden;
}
.wrap ol li{
width: 50%;
float: left;
}
An easy way is to use CSS multi-column.
.wrap{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
See http://jsfiddle.net/aC4Nc/
To increase compatiblity with old browsers, use this polyfill
I have a set of divs with this layout:
div.post_summary {
clear: none;
width: 170px;
display: inline-block;
float: left;
margin: 5px;
background-color: #FF5900;
}
It now looks like:
But I want it to look like:
The order of the divs in no way matters. How can I do this?
Since order doesn't matter, you can do this with CSS columns:
http://codepen.io/cimmanon/pen/CcGlE
div.container { /* container holding all of your `div.post_summary` elements */
columns: 20em; /* desired width of the columns */
}
div.post_summary {
margin: .5em;
background-color: #CCC;
}
div.post_summary:first-child {
margin-top: 0;
}
Make sure you check http://caniuse.com/#feat=multicolumn to see which prefixes you need.