I know probably most of you know all of these stuff but still maybe out there are people like me who are just starting to learn these stuff about grids in css. and maybe these questions will help them too.
What are grid systems ?
how to calculate a grid system in pixels and percentages ?
What are offsets? How to calculate offsets ?
Is it better to use a grid system ?
As you have probably already encountered there are so many different grids and css frameworks it can be a little confusing, so I will try my best to help.
Grids are nothing more than an area of screen broken down into segments. Most grids are typically split into groups of 12 (or multiples of twelve). So with a container 960px wide and having 12 groups (which I will now call columns) each column is 80px wide.
Calculating grids can be complex and when combined with adding gutters, offsets, margins, nesting, containers, etc. your css can get rather messy pretty quickly.
There are a number of grid based css frameworks out there with the two most popular being Bootstrap by Twitter and the Foundation by Zurb. I believe that these two have grown in popularity over Blueprint CSS and 960 grid + others as they offer a wide range of plugins as well as layers of scaffolding to help building really nice looking responsive websites.
Hope this helps.
Related
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
I have a question on converting an existing (non-responsive) site to a semi-responsive one.
Facts:
We have a separate site for mobiles, so no issues here.
Our desktop site is 978px width, and this won't change for those screens of 978px and above.
Tablets however, starting from 768px to 977px - will need some customisations on the layout.
Therefore, our site needs to become "semi-responsive" to cater for the 768px breakpoint, 800px breakpoint etc. for common tablets.
Our site uses pixel widths almost everywhere. We're doing research to:
a) Convert our container to a grid-based version where we use 12 columns. This will still be our own coded approach rather than relying on a framework like Foundation or Bootstrap. However the concept will be to use similar percentages as Foundation (e.g. a large-6 on a 12 column grid would be width: 50%) and then we will customise the paddings etc. from there.
b) OR we use a 10 column grid, which makes more sense to use because the numbers are a lot simpler, e.g. large-1 has a width 10%, large-2 (two out of ten blocks) has a 20% width, and so on.
I'm wondering if there is any specific reason to go for a 12 or 10 column grid? We don't have a specific 12 or 10 column design as we are altering the existing website with some element of re-design for the headers/footers. I know that a 12 column grid is standard, and I've never heard of a 10 column grid, but I am curious if you would choose a) over b) above, or not? Is there any compelling reason for me to choose the 12 column grid if a 10 column makes more sense and has less hassle for margins/paddings and getting columns to fit within a 100% width exactly?
We are also considering http://www.responsivegridsystem.com/ which is a different simpler approach, but I think that this is quite different to the above so we'll experiment with this separately.
Any advice would be much appreciated.
Many thanks
Grid systems are normally based on a 12-column grid due to the fact that 12 is divisible by 2, 3, 4, and 6 evenly. If you used a 10-column grid system, you would be able to easily set up a 2 column layout, but three would be much more difficult. The 12-column system makes 2-column, 3-column, 4-column, and 6-column layouts very easy to figure out the math.
Since this is a more custom application, I would suggest not treating this as a responsive grid choice, but rather what responsive methodology will work best for your set of constraints.
I personally recommend Bootstrap's grid system as it is very easy to use and get started with quickly.
Please forgive me, but can somebody please explain to me the purpose of the Fluid Grid, as featured on cssgrid, for example. By grid, I refer to those columns, some are 9, others 12, others 24 columns...
1). Is the grid used as a background, or stencil, for the correct sizing and positioning of DIVS?
2). Is it essential that a fluid grid (9, 12, 24 columns) is used in designing for a Responsive website, or can I just use CSS3 and media queries to define break points?
3). What's the difference between the number of columns, and why would I use 9, instead of 24 columns, for example. Is a higher column count better for more content?
4). Why are there so many Fluid Grid generators available? Is it because each one is better or different in some way?
Thank you
1). Is the grid used as a background, or stencil, for the correct sizing and positioning of DIVS?
Yes, that's more or less it. You could picture the grid as an invisible stencil to help with the sizing and positioning of the divs. Since you are talking responsive design, the widths of the grid columns will vary, depending on the width of the veiwer's browser window.
2). Is it essential that a fluid grid (9, 12, 24 columns) is used in designing for a Responsive website, or can I just use CSS3 and media queries to define break points?
Grids are intended to simplify your life, but there's nothing to stop you rolling your own solution, or mixing custom CSS styles with an off-the-shelf fluid grid framework
3). What's the difference between the number of columns, and why would I use 9, instead of 24 columns, for example. Is a higher column count better for more content?
You can picture that for a given window width, more columns = narrower columns. You might find that more columns gives you better control for a given page layout, just depends on the specific of your project. In practice, more columns will actually give you less space for content because of the gutter or spacing between each grid column. If you are thinking resoponsive design including mobile, then at some point most grid frameworks start displaying the columns as a vertical stack, ie:
1-2-3
becomes
1
2
3
Dividing a hand-held screen into 9 vertical columns isn't going to be very usable
4). Why are there so many Fluid Grid generators available? Is it because each one is better or different in some way?
Partly personal preference, you may like one option over another, and partly different features. Some frameworks like Foundation or Bootstrap come with a lot of extra CSS styling as well as additional javascript resources that you may wish to use.
Have fun ... it's an interesting time for web design!
Know it deeply with ETHAN MARCOTTE - Alist Apart on RWD.