I want to create masonry layout using css only, i read all tutorial in internet, but they using column property to divide layout, the problem in here is the layout will be display like this (with 1,2,3...is a items).
1|3|5
2|4|6
I want my layout must be:
1|2|3
4|5|6
I want use css only.Please tell me if you have any solution or idea to resolve this problem.
You can use flexbox. See codepen for example, and complete guide to flex box to learn more.
In order to keep the layout horizontal, adjust the flex-direction to your liking.
Related
I need to do a layout dynamically on nextjs, with 3 columns of 3 rows and so on.
Actually I use flexbox. Is it possible to do this with flexbox, Reactbootstrap or some CSS only ?
To achieve the basic 3x3 shape with auto-wrapping I would use a simple css flexbox using:
flex-direction: column
flexwrap: wrap
(and limit the height to decide where items start wrapping)
Then to achieve the multiple 3x3's I think there's no way to do it in plain css, but you can simply devide the list of items into groups of 9 using js (react side) and render the 3x3 as multiple times as I said before.
For more information on flexbox, I'd recommend the css-tricks article on it:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is probably a very basic question but I can't get this to work.
I want all the divs to pill up to the left until the main div's height is reached and go to the next row.
Using float:left, I get the result on the left (in the picture below)
How can I achieve the result on the right using one general css class that will be applied on each div element?
It looks like you're trying to do something similar to masonry. There are a few ways you can do this. If you're going to have dynamic data I'd recommend using the css columns. There's an option here : http://css-tricks.com/seamless-responsive-photo-grid/
There's also a similar question here with a good jqueury answer : How to Create Grid/Tile View with CSS?
If you do NOT have dynamic data, and it's all going to be static then it's likely better to do absolute positioning for your rows, and offset them as needed. Here's a simple jfiddle example :
http://jsfiddle.net/PhantomDude95/j9GbG/
Bootstrap comes with a set of nice styles for a table.
I however need that same style but for a div with table-like content.
I took a look at the css and there's a complicated hierarchy of css selectors that target each tag of the the table. I could update the bootstrap css to target my div but that is messy.
Is there no quick way to apply bootstrap css table styles to my div with .row and .cell inner divs?
There are a copious amount of other libraries you can utilize that are much smaller and minimalistic in size.
One of the slimmest variations I've used in the past would be the:
960 Grid System
Make a custom CSS file here, without all of the extra necessities of bootstrap.js.
http://grids.heroku.com/
Learn More:
http://960.gs
It's not exactly a table system, but you can just create full length rows and chalk it up the same way.
See here: http://grids.heroku.com/fluid_grid?column_amount=5
Foundation 4's grid system, with its mobile first approach is a no brainer when it comes to styling the layout of a page when you already use other foundation elements (whether it is textual content, the general layout of images/content on the page like main content and sidebars).
In the following example page, each grey rectangle is made using grids and nested grids:
I often find myself designing "tabular data" which consists of elements and subelements (like individual grey boxes in the center of the previous image) that look a little bit like this:
Some elements like the controls have to be aligned, and when you click on an element it reveals a dropdown menu with more detailed information about the item.
I often use the grid system for this kind of elements during mockup phase, because it's quick to archieve the alignment and try different widths, but when refining the design, the foundation grid gets in the way with its default behavior when resizing the browser, spacing and it produces a lot of grid specific markup making the html code hard to read and understand.
So my question is: do you use foundation grid for these kind of details in a design, and if not, what's your favorite way to get multiple elements on the same line with different alignments, and having certain elements aligned with each other (simple divs with hardcoded width? display: table? something else?).
I know there is a new CSS3 flexbox module coming to allow this kind of display but it looks more to me like a replacement of the foundation grid system than the way to go when styling this level of details in a design.
It looks like the way to go is to use Foundation grid mixins (like explained at the bottom of the page).
It gives you the best of both worlds: the ease of use of the foundation grid while still being able to fine tune the behavior of the grid (space between columns and so on) that could be different for every elements you style.
Another advantage is that you don't need presentational classes. Instead of writing something like
<div class="row">
<div class="large-12 columns">
<div class="myItem">My Item</div>
</div>
</div>
You can go with
<div class="myItemWrapper">
<div class="myItem">My Item</div
</div>
While having in your style.css.scss someting like
#import 'foundation_and_overrides';
.myItemWrapper {#include grid-row(nest-collapse);}
.market_label {#include grid-column($columns: 12);}
I have this simple code with Twitter Bootstrap 3: http://jsfiddle.net/korjavin/xUJGV/3/.
(result only: http://jsfiddle.net/korjavin/xUJGV/3/embedded/result/)
I am confused that rows with lorem-lipsum text have not any vertical margin.
I can add margin-top to custom.css but connect it to all classes like col-sm-1(2 ..), col-xs-*, col-* ... looks like bad solution.
What is the best solution to add vertical margin for all Bootstrap grid classes?
The best solution is to respect Bootstrap rules on element nesting. A container, within it a row, within it some col that don't exceed 12 in total. Then, every paragraph wrapped on a <p>tag, and so on.
Basically your problem is about correctly using Bootstrap elements, not about CSS.
Check an improved version of your fiddle, also in full screen.