I'm trying to reproduce this 3 column grid http://romeavenue.com/en/2/Tours-Of-Italy but i can't get it to work. All i get is a 2 column grid and i can't work out why - see http://eternalcitytours.com/en/2/Tours-Of-Italy
Can anyone see what i'm doing wrong?? PS sites should be responsive to change with viewport.
Thanks
Tom
Isotope calculates the number of columns, based on the width of the parent element. When calculating the width, you also have to bear in mind padding and margin, as part of the box-model.
Simply changing .feature to have a width of 1000px gives you three columns:
feature {
width: 1000px;
}
Obviously, you'll have to do a bit of adjustment of the rest of the layout to make it work correctly, but that should give you a start.
Given that there is no code available and i cannot yet comment, my first guess would be that the container hasn't got enough width for 3 columns.
Related
So I'm testing CSS's grid abilities and one of the things I can't figure out is zooming levels from browsers and the behavior of images within them.
e.g. If I change the viewport it's all fine. The grid and it's images scales perfectly but there are users who use ctrl+- or cmd+-.
If this is used the image is scaled like it should but the grid doesn't scale like I thought it would.
I created a basic grid containing 4 columns and no rows. I don't want to have the width full screen so I added a margin on the container holding the grid of 25%.
The grid is place within the center. Here is a Fiddle.
https://jsfiddle.net/kagprzae/
Can anyone see where I missed a turn?
---- SEMI-SOLVED IT----
So The trick is to use absolute pixels. That way you can use ctrl/cmd+-
The downside is that the grid isn't responsive anymore so you have to use #media queries to change layout...
I'm not sure what I believe would be the best approach to do this.
---- COMPLETE SOLUTION NO JS ----
So after some (a lot) of testing and thinking I came up with the following solution.
Give the .container a width (in my case I could) and calculate your grid according to a 100% width.
You can margin:0 auto; to center the div.
See this fiddle
Here is what I want to achieve with Polymer Elements:
Polymer Structure
The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.
I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.
Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.
I would be very thankful for a codepen (or similar) example on how code and result could look like.
Update: I found the solution here: How to control number of items per row using media queries in Flexbox?
You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.
I have tried a lot of grids from skeleton to golden and bootstrap but I was unable to find a better solution. The one that came close was grid pack. but I dont want any column margin. Is you can let me know what is the better way to do it. For eg. I want to use a 10 col with 6col floating div...with 12 col i tried 8col with 4col and 7col with 5col..but i dont get the exact width of the psd.
You can see i have added a screenshot of psd.
Thanks
PS. I am not attaching any code because im confused. so please dont down vote. I just need an advice or small demo
Grids are farely simple.
The reason why you might be slightly confused is that people use fixed and fluid grids, fluid is usually set in percentages and fixed pixels.
to use fixed just start with creating a container size that you will center in the browser so,
.container {
width:960px;
margin: 0 auto;
}
Divide 960px by 10 = 96px per column
In CSS, create a class for each grid size using the formula 96 * 1, 96 * 2, all the way to 10
grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}
then apply the classes to the elements in your HTML so
<div class="logo grid_3"></div>
<div class="nav grid_7"></div>
Most grid systems also use a "prefix" and "suffix" with margin applied, which pushes or pulls elements to the left or right when you don't want a container that needs to be a grid_3 but your having to make a grid_7 because of spacing.
Grids are great at creating visual balance and also providing a way for us as developers/designers to lay out content easier.
fluid grids are slightly different and I would wrap your head around fixed first.
[edit] you should use what is in the design. use (suffix and prefix) like i explained to push and pull elements on the page, so use (suffix_1) as a way of pushing the right side element away creating the column gap in the design, same goes for preffix_1
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn