I am trying to create a newspaper-like look through pure CSS where everything flows through columns and onto new pages when it needs more space.
I have tried flexbox and grid, but it does not work the way I need it to. The content inside can be images, divs, etc. I found it best to illustrate what I am looking to achieve through a picture:
I also created a code pen to try and demonstrate my current attempt:
https://codepen.io/knickfocks/pen/qBZBLqq
As you can see from the above sample code, the items align in columns left to right. The items are assigned various heights just to demonstrate that I wouldn't always know the height, and the content of these items can vary in size. But I am looking to have it move onto the next column row after it runs out of width space. Sorta like how a newspaper reads.
Thanks in advance!
Related
I am new on this forum, hopefully someone can help me out.
I am trying to create a page with three independent columns. Each column will have its own divs of different heights. See this image - 3 columns
I achieved this layout using separate divs for each column and then divs for each window, then I tried to make the layout wrap when I make the screen smaller into two then three columns but this is where I got stuck. I want it to prioritise the top divs when the window gets smaller, see this image - 2 columns. Wrapping is of course made very simple with flex and grid but these two don't allow me to create different height divs in each column, it's always based on even horizontal lines, or if I use flex in column direction it messes up the order of windows when it wraps.
I am very particular about the order being as per the image, because I will need to keep adding content to the page and most recent content will need to always be at the top.
Maybe there is a way to add order to each div in flex which reaches beyond its container? Or can someone suggest another way to do it?
Hope this is clear enough...
Thanks
I'm looking at creating a grid for a day view of a calendar, where the items are vertically positioned and sized according to their start and end times. If an agenda item doesn't overlap with anything else, its width will span the full width of the column; however, if items overlap, they split the width between them. Example images below:
Full-width items, no overlap
Overlapping items
Clearly, this can all be calculated using Javascript with full knowledge of all the meetings at once. However, I'm wondering if there's an elegant CSS solution to handle this, where the code needs to only provide the vertical position and height?
I ask because I'm hoping to organize my React code such that each grid box only needs to know the data for its own agenda item, keeping good encapsulation; rather than needing to pass in a bunch of data (pre-processed or not) about other items.
This sounds like a perfect use case for flexbox. Which also plays nicely with React.
Bootstrap V4 can be used with flexbox. Another good option if you are using PostCSS is lost grid.
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
I'm doing a project with bootstrap, and I have a problem with the alignment of the s columns. These apparently are not well aligned to the size of a specified column, so are spaces within the site.
I did not find some method that allows me to solve this.
I leave an image below.
Problem Image
It looks like you're putting multiple rows' worth of columns within the same <div class="row">. That works if they're all the same height, but yours aren't. Bootstrap implements its grid system by making each cell float: left, which will give kind of funky results if some columns are taller than others. Here's an example where you can kind of see how it ends up positioning variable-height cells.
Instead, you probably want to do multiple separate rows, as shown in the second third of that same example. Each row will start over at the left margin, fully under the row above it, which sounds like what you want.
Alternatively, you can add a <div class="clearfix"></div> as another way to start over at the left margin (as shown in the final third of that example). This isn't as clean, but it can give you more flexibility to do really fancy stuff with your responsive layout. See the documentation for responsive column resets.
I'd go with multiple rows unless you really need the flexibility of responsive column resets.
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example