I am working on a slideshow combining css and javascript, but currently I have no idea how to realize the planed design as it need to be responsive for different screen-sizes.
Following I've added a jpg visualizing the planned Layout:
Visualization of Layout
My approaches so far have been flexbox and float, but flexbox doesn't allow a 2 column 1 box : 2 box approach and float doesn't help with the adaption for different screen-sizes (wrap).
Does anyone have an idea for an approach? I realy want to avoid using different css for the 3 szenarios described in the picture above
Related
Im trying to convert my default category posts to a specific style as show in the image. I'm stuck at the css end and can't figure out a way. Can anyone guide me onto building this kind of layout css?
Using w3.css 12 column responsive grid to do this. You can specify grid space for phones tablets and computers.
See here.
My code...
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.
So I have looked all over the web and thei site and can't quite figure it out.
I want to create a custom grid in Bootstrap. The container should be 5760px and have 36 columns with 20px gutters. I know this is ridiculously large. but what I am trying to do is essentially have 3 12 column grids (each 1920px wide) side by side.
I've tried the custom build for Bootstrap but I don't really understand the container / grid system I guess. Also I am using Sass as opposed to Less. So that presents another twist.
If I could just get the css and by pass all the Sass / Less stuff that would be great.
Ok so im going out on a limb here, but if you're working with bootstrap and you want to configure the basics so much.
What you can do is download a customized version of it.
Take a look here : Boostrap 3
Here you will be able to customize the amount of columns you wish to work with : Custom Grid Count
And you will also be able to select the container size. : Container Width
Along with all the features of bootstrap.. And all from bootstrap themselves.
Once you have all your fields filled in and edited to your spec, scroll to the bottom and 'compile' it!
As an answer goes its really the best i think I can offer!
I looked around on the internet, but found no satisfying answer. I am new to using the Bootstrap 3 grid, which I enjoy a lot. However, for an animation on a page I am creating, I would like to shrink a row to some small width and while this animation plays, I want the Bootstrap grid to do its work on this div instead of on the entire viewport. Does anyone know a way to do this? I found the following suggestion by someone who was also wondering about this:
Bootstrap grid system responisve utility in resizable divs
However, I would prefer a CSS solution for this.
I have been trying to create a 3 column layout with divs but I haven't found any way to do the following:
I haven't found any info on how to do this. Basically I want the divs to be able to be added in any order and have the margins the same.
The Twitter Bootstrap grid system is especially suited for this type of layout. If you want more specific help, please provide some code on what you've already tried.