This is the final result:
As you can see in the pic, each line in blue is separated by each element.
I want to try this, I have already designed the elements:
But I don't know how to put in the right place each line, here's a complete example:
https://codesandbox.io/s/stoic-pond-luh0l
The way I'm trying to solve this is with this line:
<FlowDivider style={{ left: 240 * index + 1 }} />
But I don't know what's the right operation for this problem... Thanks!
First of all, you should put styles in classess instead of style attribute.
Back to the question:
I have two ideas for that task.
Just separate icons from the descriptions. And it will be easy. Just use flex and combine icons and separators.
Set fixed width for the section with cards. Create section with separators outside of the static flow. Set the same width for separators section and use flex to set equal gaps. (assumption is that all cards has the same layout)
But i prefere to use first method. It's easier to resolve and manage.
P.S. If you ask just for math algorithm:
It's not that easy, because you have changeable card width. That's your constants which you need to include in your algorithm:
icon width: 50px, padding from both card sides: 30px. Variables which you need to include: gaps between cards(15-35px), cards width minus icon width(it's hard, because it's relative, and you don't have that information).
So to fulfill your idea you need to get card width, calculate distance between two icons, and than you will know how much space you need between separators. Soooo, i don't recommend that approach;)
I don't use grid lately, so i'm not able to give you easy answer with grid.
Related
I am new to CSS grid, I am planning to create the following layout with Grid rather than flex, but I am not able to find a way to use partial grid area. I also tried splitting into 8fr. Is it possible to do it with CSS grid? Fractions may change later on as well. Like instead of 1/3 space in the first row. It might change to 1/4, 1/4, 2/4.
Can someone let me know if it's possible to do it in one grid area or not? Thanks in advance.
I recently found Foundation5 has Block Grid which has rarely found use case online anywhere to demostrate the importance of using it... or is it even a great function to have? Because I am currently using Bootstrap3 and found it does not have Block Grid. So I wonder if its really a big feature one should watch out for.
Maybe some critical user case that will be so much better to use Block Grid other than Column based Grid.
Thanks!
There are several differences between the block grid and regular column grid..
The block grid is always evenly spaced and distributed
The block grid requires less markup
The block grid doesn't have inner padding
Take a look at this demo: http://codeply.com/go/XiyFxtMcXT, and you'll see the differences. Notice how the block-grid evenly wraps the items when the items exceed one row.
Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.
You could just as easily use a percentage based grid system to achieve the same result.
I think the benefit of the 'block grid' is:
Items are displayed in a 'ul' which will group them together (good, for accessibility).
It's quicker to add one style to a 'ul' that will automatically make each 'li' a 'column' than it is to add "col-x" to each 'li' manually
They've already built it so you don't need to.
I've got a page of products, and some of them might have extra rows. Regardless of that, my goal is to have every product display across the page, left to right, top to bottom.
See this example: http://jsbin.com/lijisa
If you modify the JSON data so that each product has two numbers in the variations array, everything lines up perfectly.
How can I get all the columns to be a standard height, without actually setting a hard height value?
What you are looking for is known as a "masonry layout" there are a few libraries that will allow you to do such a thing
Salvattore
http://salvattore.com/
Masonry
http://masonry.desandro.com/
I also found this achieving the same effect using column-width
http://www.bootply.com/118335
Use the hidden/visible helper classes combined with clearfix, to reset your rows only on appropriate devices, like so:
Example: http://www.bootply.com/YpH56xyzDB
The hidden/visible aspect lets you clearfix between specific columns only when on the right device.
I lifted Pacman and Space Invaders (henceforth, collectively called "object") from this website, and I'm trying to flow them one after the other in a straight line (randomly), but there are jumps currently.
How would I wrap each object (Pacman or Space Invader) in this case, and make them flow?
Here's what I have so far, along with float: left; on every object:
http://codepen.io/anon/pen/ijraw
(refresh to see alternative renders)
This is what I do want:
(all the DIVs flowing one after the other, one fluid line at a time)
This is what I don't want:
See the lone red Space Invader on line 2? I don't want that -- I want a line full of stuff.
PS there is too much code to post here. The Pacman and Space Invader objects aren't uniform, nor similar in any way, which is why I'm wondering if there's a way to wrap them with something more consistent.
Floating divs will find their place in the DOM flow. Your two images are different sizes so floating is actually doing it's job.
Simply change float : left to display : inline-block and it should work.
http://codepen.io/anon/pen/uapkL
Any idea why my image does not horizontally line up with the text above and below it please?
http://dl.dropbox.com/u/2306276/site/index.html
You're using a different class for the image element than for the text elements you want on the right column. Set the image's class to grid_13 (same as the text) and add push_3, so it moves 3 columns to the right.
It'd be better to rearrange your elements into divs though; otherwise you'll have to give each element specific properties, and that beats the purpose of using a grid system.
In the 960 Grid system, every nested class has to have a "grid_x". You div's in between ("Status" etc) which don't use the grid system, I imagine these are throwing it off.
Try adding grid classes to these, using "alpha" and "omega" where appropriate.