I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):
This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.
I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).
I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.
I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.
http://masonry.desandro.com/
Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.
Related
I am working on an interface for a Raspberry Pi based embedded device. The interface is built with Bootstrap 4 and is currently centered around a .navbar at the top and a .row > .col structure with just two columns within the row. Within each column there are multiple cards. Depending on the user actions and enabled features, there are one or two cards that won't be rendered and the others can change in height.
My current issue is that upon a specific user action, a new card will be added to the first column thus pushing the other cards down the page and some out of view. When this happens, I want one or two of those "out-of-view" cards to then instead show up in the second column.
I can't seem to figure out a good solution to this problem. I want to keep the two columns (at least in visuals) and dynamically assign the various card elements to one column or the other.
If I leave the current structure of .row > .col then each of the card elements are static within each column via the HTML thus short of putting the card in the DOM twice and hiding one or the other, I need a different solution.
If I rebuild the page to use flex-box instead and rely on wrapping, I run into issues where one card will be larger than the other within the row causing a bunch of empty space to show up. That is before I even try changing the order of each card. On to the next solution.
Trying the grid system, I can get something close to what I am looking for but it isn't perfect. The cards move from one column to the next by adjusting grid-template-areas. Since there are cards of different heights (and can change during use), I have some cards spanning multiple rows so there isn't any empty vertical space between cards in a given column or vertical growth to any cards beyond its internal content. This works fine for one given combination of card order and heights, but doesn't for others; I run into the same problem as with the flex-box with empty space within one column for a given row.
I want this to be mainly HTML and CSS driven in order to keep the javascript to a minimum. I figure that I would add some functions to call when various user actions happen (such as with changing the grid-template-areas), it is just a matter of figuring out what HTML and CSS combo to use before writing the necessary JS.
Is there something I am missing with the solutions I have tried so far? Is there other solutions I have overlooked? Do I just need to use JS to essentially "cut" the entire card HTML code block from one column and "paste" it into the other column? Any insight or direction to another solution I can look into is appreciated!
Here are some visuals:
Initial layout:
After that, the user could cause card 2 to pop up which pushes card 3 and 4 out of view:
When that happens, I want card 4 to show up in the second column:
When using the grid system, due to how the various cards can change in height, I have not been able to find a way to size the rows dynamically enough to correct these anomalies (growth if the height is not capped, or empty space if it is):
I'm working on a site that has on the homepage various blocks of information. I've been using Bootstrap for the grid, but when a column is taller than the previous one, it creates an entirely new row, leaving empty space in the columns, like so:
I know I can remove the space by nesting 2 and 4 in the same column div, but it would be far better for the project if the grid system would automatically nest the columns, like so:
Is there a grid system that can do this for me?
Update:
Thanks for the Bootstrap cards link, but what I'm looking for is something that specifically puts the first items up top, so that my users can put the most important blocks first, and have those at the top of the page.
I'm currently developing a Wordpress blog theme - it must be fully responsive. I wanted to display a 2 column layout on bigger screens, having independent columns.
I thought of something like this
the mobile page is no problem - but on the 2 column layout I had problems like this (bottom image)
I tried it with the :nth-child() selector + floats, but it didn't work.The posts should be listed by date! would be really grateful if somebody could tell me a way solving this problem! thanks in advance.
edit:
NOT using bootstrap or any other grid system!
I am assuming you have multiple elements that are just floated, but that wont work if the elements are of different heights. You will need to create two separate columns for those elements.
I've been pondering this ever since I started using Bootstrap 3 - which is a fantastic framework by the way. What I'm describing may be completely the wrong way to go about this or it may be a very common issue and I'm interested to see how other developers & designers handle this.
The image below contains a simple row (white box) in a container. The row has a col span of 10 with an offset of 1 and the blue box is then inside a nested row of the white box. When the designer does this they will simply be keeping everything matching up to the nice full width container grid (because they won't understand or need to know how nested rows work).
However, the reality in Bootstrap 3 is the 12 grid starts again inside the nested row. The result of this means I can no longer line up the blue box nicely as it doesn't fit the nested grid.
So my question is: how do others handle this? Am I actually using nested rows in a way I shouldn't be or is this something that the designer needs to be educated on? Or is there something much easier that I'm now aware of :)
Thoughts?
After doing some more investigation I have just realised that I don't think this is an issue at all. What my example above is ignoring is that the gutter remains the same width in nested rows as in the outer rows. When I did in above images (and with how I always thought about it) I simply resized the grid in Photoshop which also resized the gutters - which is incorrect.
I've tried now using this cool tool http://gridpak.com/, created the grid to the same width as my nested row and, lo and behold, it lined up perfectly.
The columns in the nested rows will be different still but the result will match up with the original design. In the example above, the blue box will actually be a col span of 8 with an offset of 2. The designer will look at the site and "think" it is actually a col span of 6 but we will all know better.
Thanks for the ideas and suggestions everyone - especially to royalsflush for the neat jQuery tool he developed as that might still come in handy.
Indeed, the 12 grid system may cause difficulties in some cases when you have fixed directives from your designer, but there are all kind of tricks that you can do in order to succeed.
So if you want to align the blue block to be on center and a width of 6 cols, you can just use col-lg-offset-3 col-lg-6 classes and don't use it inside that white block, or if you use it inside that white block you can set this classes col-lg-offset-2 col-lg-8 and change the left and the right padding from 15px to 45pxlike you can see in this example (code here).
As you can see, everything is possible in bootstrap, you just have to change the left and right padding and you can create any type of layout you need.
I guess, it's because you did this whole thing in a <div class="container"> so the grid went according to this block. Just remove the <div class="container"> and the inner blocks will snap to the 'main' grid. Play a little with classes and offsets and it will look like in the first picture.
I found a couple of variations of your question, mainly because I had the same problem a while ago - maybe one of the answers to those can help you out:
Bootstrap 3 nested grid not reset to 12
Prevent bootstrap 3 from resetting nested grids / use master grid
all! I thank you for your time and attention today : ). I currently use Dreamweaver and do some design work, however I have been unable to find an answer to this question. I'm happy to pursue any knowledge necessary to accomplish this (such as learning php or javascript, etc.)... Here's is my problem... I want to make a webpage have this type of layout - (this would be a homepage, broken into components in three columns (there would be a header above, that I left out of the illustration because that would be full width of website and not produce a problem, I don't think)... the left is full height. the center would have three rows and the right would have three rows - offset from the center column) -
http://i.stack.imgur.com/KkEiR.jpg
I can place a div as a wrapper around the entire thing (as I normally need to do when making a three column wide section), and using css... float the left column, left. Add a left margin to the center one (whatever the width of the left div is). And float the right one, right... However, while that does allow me to have three columns across, I cannot have the multiple rows downward in the center, or right column (because it outputs at the height of the largest column for the wrap). In these smaller sections I would like to use some php scripts (I have a php news script and a shoutbox script), so it's not like it's a static picture or text that I could carefully slice, making numerous div wraps and divs within them down the page...
In my research I've seen things such as php includes and requires (I'm not sure if that would allow for the multiple rows in the center and right colums though), I just know it can be used to insert a php script or document into a div. I've also read that isn't the best practice and that Ajax/jquery should be considered for better security. However, I'm still not sure if either of those would allow me to create this layout. I'm sure that joomla or drupal or any number of other CMS probably allow for this, but I want to know the "hands on" way to do it (I've always found that makes configuration, troubleshooting and design much easier and much better quality down the line).
I respectfully ask that answers stay on topic as much as possible, without questions such as, why do you normally do or use this? etc... I would greatly appreciate constructive information on what I CAN do to accomplish this : D... I thank you all again for your time and attention!
Ok, I've found at least one way to accomplish this : D... I still use Divs within Divs (floating them left or right) and placing them within wraps (that can also be floated left and right) to get as many Divs across as I need. Then when I need multiple vertical Divs, I simply create a new *.php file with all the vertical Divs I need, and use the php include_once line to call that *.php file (and all of it's vertical Divs) into the Div on the original page, voila!
My first page (in shorthand) may look something like this -
<div id="content_wrap">
<div id="a"></div> (floated left in css)
<div id="b">
<?php include_once ('vertical_divs.php'); ?>
</div> (floated left with lefthand margin in css)
<div id="c"></div> (floated right in css)
</div>
My vertical_divs.php may look like this -
<div id="vert_a"></div>
<div id="vert_b"></div>
<div id="vert_c"></div>
<div id="vert_d"></div>
<div id="vert_e"></div>
Again, this would pull all of those vertical Divs into Div "B", allowing that column to have multiple vertical Divs without interfering with the Divs to it's left or right.