Do I need to explicitly set width and height to the container if I am using grid or flexbox?
I was trying to give the height of my container div but got confused if I should skip that since grid can handle it for me in the grid-template-columns and grid-template-rows properties.
Related
For my PSD Design the container width is 1136px and i used bootstrap for my design so i decided to set container width is 1166px because the container padding 30px was matched the row padding 30px so it is right way to fixed 1164px or shall i go to 1136px give me a clarification for setting width for container
If you want your site to be responsive you should use Bootstrap breakpoints instead of setting fixed width to your container. Try to not get too attached to your PSD and think of your website as something more fluid.
I've read through A complete guide to Grid, but still confused with the differences between two sets of container properties, namely the "justify/align-items" vs. "justify/align-content".
My confusion revolves around the claim made by the author that the "-content" set are there because
Sometimes the total size of your grid might be less than the size of
its grid container
I think this applies to both, not unique to the "-content" set.
Could someone help explain this? Preferably using some graphical illustration as examples.
Let's start with clarifying the terminology:
Grid Container
The grid container is the overall container for the grid and grid items. It establishes the grid formatting context (as opposed to another formatting context, such as flex or block).
Grid
The grid is a group of intersecting vertical and horizontal lines that divides the grid container’s space into grid areas, which are boxes that contain grid items.
Grid Items
Grid items are boxes in a grid container that represent in-flow content (i.e., content that is not absolutely positioned).
Here's an illustration from the W3C:
The justify-content and align-content properties align the grid.
The justify-self, justify-items, align-self and align-items properties align the grid items.
With regard to the problem described in your question:
My confusion revolves around the claim made by the author that the "-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"
Well, you can see in the illustration that the grid is smaller than the grid container.
As a result, there is space remaining and the container is able to distribute this space to vertically center (align-content: center) and right-align (justify-content: end) the grid.
The extra space could also allow the grid to be spaced apart with values such as space-around, space-between and space-evenly.
However, if the grid size equaled the container size, then there would be no free space, and align-content / justify-content would have no effect.
Here's more from the spec:
10.3. Row-axis Alignment: the justify-self and justify-items
properties
Grid items can be aligned in the inline dimension by using the
justify-self property on the grid item or justify-items property
on the grid container.
10.4. Column-axis Alignment: the align-self and align-items
properties
Grid items can also be aligned in the block dimension (perpendicular
to the inline dimension) by using the align-self property on the
grid item or align-items property on the grid container.
10.5. Aligning the Grid: the justify-content and align-content
properties
If the grid’s outer edges do not correspond to the grid container’s
content edges (for example, if no columns are flex-sized), the grid
tracks are aligned within the content box according to the
justify-content and align-content properties on the grid
container.
(emphasis added)
I am using flex-mode and I would like a 'deck' of 'cards' that all have the same height and width, and the width to be consistent and based on different breakpoints. I have not found a way to do this, though. Whenever I add a card-deck class around a group of cards, they ignore any width set, whether with col-* classes or by setting a specific width on them.
This is the hierarchy I was trying to make work:
.row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4
And here is a codepen with what I was attempting to make work
The card-group and card-desk both use display: table (or display:flex when $enable-flex is set to true), so you should not wrap your cell into col-* classes to set their width. The col-* classes not only set the width but also float: left, see also: https://stackoverflow.com/a/35804749/1596547
For display: table the widths are is the result of the automatic table layout algorithm as implemented by the browser, see https://stackoverflow.com/a/21130851/1596547.
For display:flex you can set the flex-basis to a fixed width (with both flex-grow and flex-shrink set to 0) see https://stackoverflow.com/a/23794791/1596547
Applying the CSS rule display:flex to a Bootstrap row seems to take the control of Bootstrap column width away from Bootstrap. For example, if I have a column with the class col-md-9, it is only as wide on the Android Chrome browser as the width of the text it contains instead of occupying 75% of screen-width according to the Bootstrap grid rules.
What is the underlying cause of this behavior and how can it be avoided?
If you apply display:flex to a .row, the width of all its immediate children will no longer be controlled by their width property, so the block (Bootstrap) model will no longer work. Mixing Bootstrap 3 layouting classes (based on the block model) with display:flex (the flexbox model) is not a good idea.
In the flexbox model, if the flex-direction is not set, the first level children of the element with display: flex will have their width NOT influnenced by the width property, but by (not necessarily in this order):
child flex-basis,
child flex-grow
child flex-shrink
child content actual size (width)
child's siblings content actual size
parent align-items (if set to stretch)
child align-self. (if set to stretch)
There are quite a few properties, but it allows fine-grained control over any posible display scenario. Some of them will not apply to width if the flex-direction is set to column on the parent, as they will apply to height in that case.
By the way, Bootstrap 4 comes with flexbox, but it's not out yet.
I have a basic Bootstrap question regarding the grid system. When you use the standard grid and apply the container class your container width ends up being 940px by default. If I want my container to be larger do I then use the fluid grid system so my span classes expand to fill the entire container?
When you use a standard grid, the container, row and spans sizes are fixed (in pixels) and with a fluid grid that sizes are dynamic (in percentages).
As you said, container width is 940px by default in standard grid and 100% in fluid grid. It's not necessary to use fluid grid just to make your container larger, that depends of on your needs (if you need your design to be responsive or not). An easy solutions is just to override the width value of container class (.container) after the inclusion of bootstrap.css file.
.container {
width: 1024px;
}
Hope this helps!
EDIT: Also need to override span widths!