I have a website. Can I convert my website into a fluid grid layout? Are there any tools to automate this or do I have to create a fluid grid (in Dreamweaver) and insert <div> tags and insert my styles into it which will finally resemble my website.
There is no tool that I know of which will create a fluid grid layout out of the box to a existing one. This is probably due to the fact that such a tool would have difficulty to decide which kind of grid structure should be used. Always remember that when using grids, the size of a column is fixed and therefore might not resemble the css that you have created using pixel-accurate css styles.
What I would recommend though is looking at the many frameworks out there. They are really easy to use and the only that you have to do is add class names to your div tags.
List of Fluid Grid Frameworks
Fluid 960
CSSGrid
Bootstrap
FluidBaseline
There are like a million more of those. If you are just looking for a grid system that can be easily implemented without any hassle just use Fluid960.
edit
Lets say you had the following structure
<div style="width:100%">
<div style="width:20%>First div</div>
<div style="width:30%>Second div</div>
<div style="width:50%>Third div</div>
</div>
In case of the 16 grid 960 framework you would need to take the 100% as all 16 columns. Therefore 20% (so your first div) will need to be a 3 grid column, your 30% a 5 grid column and your 50% a 8 grid column. Now you have 3 + 5 + 8 = 16 columns. In HTML you just end up writing
<div id="grid">
<div class="grid_3"></div>
<div class="grid_5"></div>
<div class="grid_8"></div>
</div>
And you are done!
Related
I'm trying to use flexbox to create dynamic templates where I would mix elements in horizontal and vertical directions without creating wrappers for each group.
I have for example this kind of structure:
<div id="wrapper">
<div id="zone1">
zone1
</div>
<div id="zone2">
zone2
</div>
<div id="zone3">
zone3
</div>
<div id="zone4">
zone4
</div>
<div id="zone5">
zone5
</div>
The wrapper would use display:flex and each children would be set at 100% for mobile screens like this:
My fiddle here: https://jsfiddle.net/laurentw/2myL6h45/2/
Now when the screen goes bigger, I'd like to do this
If I keep the divs as individual divs, I'm running into trouble because I have two different directions:
Fiddle example: https://jsfiddle.net/laurentw/wogmdxL5/4/
And then finally for much bigger screens:
I would like to keep all those divs separated so that I can try out multiple templates without altering the code. I want to influence the order (easy) but I would also like to control the direction and occupied space.
Is that something I can achieve with Flexbox without any additional JS?
Thanks
I got a PSD design where the grid looks like this -
Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)
I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.
My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?
I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.
My HTML file contains of a standard fluid grid
<div class="container-fluid>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
</div>
Add the following to your css
.row{padding: 0 120px;}
I'm not sure if i totally understand your question, but you can try the following:
Add a container (Bootstrap container)
Add margin with css: .col-sm-4 {margin:Your margin here;}
It really depends on what other content will be inside the rows? If the columns don't need to go from side to side, why not just use Bootstrap .container? You can still have full width content outside of the container..
http://codeply.com/go/HwIDGQpdbO
Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.
1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.
2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.
I tried the Cards Columns and it's almost what I need, except the masonry look. I want them also aligned in rows.
I also tried the Grid Options with col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.
This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.
You can just wrap all .col-*-* with one single <div class="row">...</div>. Your content will wrap when needed.
Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11 and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.
Another example taken from Bootstrap's documentation
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Here .col-4 would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.
Bootstrap 4
I made a fiddle to show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.
This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.
Bootstrap 3
I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.
In Bootstrap 3, you can omit the .row altogether and use .container as the parent to all the .col-*-*.
You can check out this fiddle to see the difference between using .row and not using .row to layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .row to put all your .cols inside.
Compensating for different content height
However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.
Bootstrap 3 provides a class for this, you can just insert <div class="clearfix"> whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-* to achieve that.
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
<div class="clearfix hidden-md hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
<div class="clearfix hidden-sm hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
</div>
Again, I made a fiddle to show the whole thing in action.
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);}
The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?