I was wodering how to code this layout:
Layout screenshot
Link to layout
The problem is irregular grid of div's. I tried bootstrap but when I use two rows there is blank space between picture.
It's like masonry grid layout.
You may use plugins like,
http://masonry.desandro.com/
You can find more free plugins like this.
That looks like it uses jQuery Masonry to lay out the posts. It is a grid layout library that lays out the elements depending on vertical space.
Related
I am using Semantic UI for the CSS styling and couldn't find any documentation regarding a staggered grid view. Has anyone implemented it yet or any ideas how to?
Thanks!
I assume you are talking about a layout that looks like Pinterest where grid items are in fixed width columns but the aspect ratio of the content inside those columns stagger the gaps between items at uneven points. It is kind of like a masonry layout rotated 90 degrees.
Unfortunately Semantic UI does not have support for masonry or staggered grid layouts with their grid system. Depending on your needs and your environment you may want to check out a tool like Isotope.
I need help with a CSS code. I run a photography website on wordpress and i have some problems displaying my pictures. There are 2 formats of pictures that are being displayed: landscape (1200 x 800 px) and portrait (595 x 853px). I want to group the tall ones 2 per row because they look so much better. I have about 40-50 images per post.
Is there any way to do this?
I've attached a demo of how i would like to result to be.
Thank you!
You can use a jQuery plugin such as Masonry or Isotope to do this - these are designed to arrange your items in a grid so that they fit nicely.
You will still need to get some HTML and CSS in place before adding the plugin to adjust the positions of the images, so you'll need to work off the plugin documentation or examples (or provide a code snippet).
It depends on how dynamic your posts are. If there's a way for you to know the structure of your HTML + CSS + content before-hand, then you can create a .tall-row class for the tall images and a .long-row class for the long images. And it's basically planning out the layout ahead of time. You can easily do this using traditional CSS, CSS FlexBox (newer), or CSS Grid (newest).
If the order of the images is going to be some-what dynamic (so you don't know when a tall image will render or when a long image will render) you can try CSS Grid'd grid-auto-flow: dense; property, which attempts to calculate the best overall fit for all of it's children. Only if this doesn't work would I suggest using a JS or jQuery plugin.
Here's an example of CSS Grid's grid-auto-flow: dense;
https://jsfiddle.net/40p0q5xx/
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 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.
For example, in a 12-column grid, I want to have a 9-grid-wide and another 4-grid-wide . The divs will have an overlap 1 grid wide in the middle. This is useful for some fancy effects.
Of course I can just use one div and then create more divs inside accordingly (not using the Grid System), but is there a better way?
Or you could organize your layout by yourself with all custom DIVs, that just follows the guidelines the 960GS gives you. There's nothing that tells you that you have to use the premade HTML template to benefit from the concept of the grid system. It's just there as a guide to make sure all widths on the page look good and fit together.
I believe that grid CSS systems were designed to enable quick and easy table-less layouts. They were not designed for this kind of thing. However, there is a third party tool that may interest you. You can find it here: http://gridder.andreehansson.se/
You may however find it easier to just use CSS to layout your DIV elements, overlap them using negative margins and use the z-index property to determine which of the overlapped DIV elements should be on top.