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;
}
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'm trying to achieve the following layout, where the section on the left is two columns and wraps around a floated element on the top right. The solution I encountered works on Chrome but not Safari.
Does anyone have suggestions on how to accomplish this with cross browser compatibility?
My current solution: https://jsfiddle.net/waverly/62nk2zxv/1/
.col-1 {
column-count: 2;
}
.description {
margin-top: 200px;
padding: 50px 0 50px 50px;
}
.paragraph {
padding: 0px 0 50px 50px;
}
.col-2 {
position: relative;
float: right;
padding: 50px 0 50px 50px;
}
img {
max-width: 100%;
}
You can see the live site here (view the "About Us" page) - works on Chrome but not Safari: https://build-kaqexsjtyz.now.sh/
Code:
<div class="test">content</div>
.test{
width:500px;
border:1px solid red;
column-width: 100px;
}
I got one column . But I want 4 columns.
Then I added property
column-count: 4;
but column width != 100px . Why ?
Try this Demo:https://jsfiddle.net/9ympv93L/
CSS
-webkit-columns: 4 100px;
-moz-columns: 4 100px;
columns: 4 100px;
u have to set the
.test {
width: 100%;
}
try this
<div class="test">content</div>
.test{
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
-webkit-column-count: 4;
-moz-column-count: 4; /* Firefox */
}
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;
}
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