Does MDC have a grid system, something like Bootstrap's where you put columns inside rows with different widths depending on screen size.
If this is not yet supported (and/or not going to be) what's the official stand on the team on this thing, is MDL's grid the official supported to use?
Found it. Looks like it just hatched hours ago. Looks like it behaves like MDL grid.
https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid
Yes. Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
https://material-io.cn/develop/web/components/grid-lists/
Related
, We have a requirement wherein we need the 12 Column Grid on Desktop as it is but on Tablet it should follow an 8 column grid. We wanted to know if this is possible in Bootstrap. If Yes, how do we do it?
It will depends on your design as you know 12 columns cover full width now you need 8 columns of full width. So in this case you can use 'offset' properties to give column based space and implement your design. Another method is you can directly use source code of bootstrap in sass or less and call mixin directly as per your requirements.
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.
hey guys i am trying to create a layout which has like 8 columns on left and like 3.5 columns on right.
Now the problem is that 3.5 columns is not supported in in foundation.
how can i achieve that?
Or can i do a custom margin and padding.If so, i guess the layout for mobile will break too.
thanks.
You can easily change pretty much all properties of the grid in SASS version. If you make total column count 24(instead of 12) then 3.5 will be integer number 7. BUT! Much easier option will be nesting grid inside the grid(gridception) so you can subdivide section of arbitrary width (standard 1 to 12 columns) in up to 12 parts.
You want to make a web-page with 11.5 columns.
One way is to customize foundation with 23 column grid structure and have 16 columns on left and 7 on right.Here is the link to customize foundation - LINK
remove the components you dont need and have that stylesheet included for that specific page.
I am quite new to web grid systems but would like to choose SUSY mainly because so many people recommend it. What I'd like to achieve is something similar to what I see with the grid system in Twitter bootstrap, where the columns are not fluid in width, but the entire grid width has two or three pre-defined widths based on available resolution.
So, for example, I'd like to have an 8 column grid, with a grid width of 1140px if available, else 960px.
I was able to come up with something similar with SUSY, where my max container width was 1140px, and by setting a min-width of 960px it would never resize below that, but the grid was fluid between the two and my preference is for it to simple switch from one to the other when the resolution becomes available. This is mainly to have 2 or 3 predictable layouts.
Many thanks if anyone can help.
Chris Chandler
You want to use Susy's static output. To do that, set $container-style: static;. See the docs on the official Susy site.
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.