I am learning CSS grid and these days I am trying to apply grid in places where I used to use Bootstrap grid. Everything is going well but I can't seem to figure out how to deal with margins in CSS grids. I am aware of grid-row-gap and grid-column-gap but that only covers the simple use cases and not all my use cases. For example:
What if I want 40px margin after every 3rd row?
See the picture of design attached. How do I achieve this css grid? I have marked all margins as m. Do I use explicit margin or do I leave columns/rows blank to act as margin.
Do you wanna something like this:
.row:nth-child(3n+3) { margin-bottom:40px; }
This will add margin after every 3rd row.
Create a class (for example .margin-40:{margin:40px 0}) and put this class beside row class wherever you want to put 40px margin.
Related
I'm trying to use the skeleton framework but I'm getting confused. Here is the code I'm trying to use:
http://pastebin.com/ZcEAed0D
I even tried adding alpha and omega to the beginning and end of the columns. But what I am left with looks like this:
http://imgur.com/En3QLA5
You see the sixteenth column is hanging off of the end. Shouldn't it be able to fit 16 columns worth of stuff on one line?
This happens if i try other combinations as like like fourteen and two, etc. It hangs off the end of the page.
Where am I going wrong?
Also are the widths between columns adjustable, and if so how? Any good tutorials on how to use all of skeletons features? Do you do a new line of the grid just by using up another 16 columns?
Thanks.
Since you are adding a 1px border to each column div, it is making each column container 1px wider than it should be. By default, a border expands the width of the container. To fix this, you must add the following CSS property to your "div" selector which will include the border into the container width calculation.
box-sizing: border-box;
More information about box sizing: http://css-tricks.com/box-sizing/
I have a bunch of inputs in bootstrap that have input-group-addon tags as labels. On my page, I have labels of various lengths of text, but I want all the labels to be the same width for the visual effect. I'm trying to manually set the width of these span elements to the largest one I have on the page (for this example, say 75px).
Making my own CSS class doesn't do the trick, bootstrap overrides it somehow that I don't understand.
Making my own .input-group-addon.myClass CSS class doesn't work either. The browser shows that this isn't overridden by another style, but I don't see it actually effecting the span element.
Lastly, simply adding a style="width:75px" to the span doesn't work either.
I'm at a loss as to how I can ovveride this style to make all my span's line up regardless of text length.
Code example: http://www.bootply.com/SvJAiwVavY
I looked at your sample code. From Bootstrap, the .input-group-addon class has a display property set to table-cell, so there is no need to do anything other than set an appropriate width. If you set a width that is smaller than the contained text, it's not going to look like it has changed. Try changing your example code to the following:
.input-group-addon.test {
width: 200px !important;
}
You may want to change your text-align to something other than center, but that's up to you.
I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).