.container It follows that when you say display: grid, what you are really saying is display: block grid. You're currently asking for a block flat grid . An element which will have the block all features -- it is possible to give it height and width, margin and padding, and it will stretch to match the container. The kids of that container, however, have now been awarded the inner value of grid in order that they become grid items. How those grid things behave is described in the CSS Grid Specification: the display spec provides us a way to tell the browser that this is the design method we would like to use.
While thinking about this issue, you may enjoy this list of errors in the plan of CSS that are less mistakes in most cases as matters that were designed with no crystal ball to see into the future! The truth is we can't break the internet, which is why we have this situation.
However, the heritage keyword means that the following does the same thing:
These are all single values for your display property, defined ahead of the specification has been updated to explain CSS Layout in this manner. Something important about CSS is that the simple fact that we do not go about breaking the net; we can not just change things. We can not suddenly decide that everyone should use this new syntax that is two-value and so every website ever built that utilized the value syntax fixes it and will crack unless a programmer goes back!
The CSS2 Specification comprehensive the following values for your screen property:
The behavior of inline and block elements is essential to CSS and also the fact that a document will be readable by default. This design is referred to as"Block and Inline Layout" or"Normal Flow" because this is how elements lay themselves out if we don't do anything else to them.
Within the following article, the first in a short series, I'm likely to take a look at how the values of display are described in the Level 3 specification. This is a change to the way we described display in previous versions of CSS. While it might seem unusual at first for those of us who've already been doing CSS for many decades, I think these changes actually help to explain what is going on when we change the value of display on a component.
The way we get around this is to define short and legacy values for display, which comprises all of these values that are single. This means that a mapping can be defined between single values and new two values. Which gives us the following table of values:
In addition, we know that a few elements are display: inline. Inline elements are similar to words in a sentence; they don’t break on a line, but rather book a character of white space between them. This will show but it will not push other components away if you include padding and margins.
We then added to these some values for display, to support grid and bend design:
Watch the Pen Block and Inline Layout from Rachel Andrew.
You are probably thinking that is all a bit confusing: why do we have two different key words here, and what exactly happened to the syntax we talked about? This leads neatly to the next thing I want to explain about display, i.e. that CSS has a background we will need to deal with in regard to the screen property.
Also explained were the various table inner properties like table-cell that we are not dealing with in this report.
Block box with normal flow interior
Block box specifying a BFC
Inline box using regular flow inner
Inline box defining a BFC
block flow list-item
Block box with normal flow interior and Extra marker box
Block box with interior flex layout
Inline box with interior flex layout
Block box with interior grid layout
Inline box with inner grid design
Block box with interior table layout
Inline box having an inner table design
We can now go back to where this conversation began and look at display: inline-block. Taking a look at the table, it is possible to observe this is defined in the two-value world as display: inline flow-root. It currently matches screen: flow-root that in a two-value universe would be display: block flow-root. Just a little bit of tidying up of these items are described, and clarification.
Screen: inline-block gives you a BFC on an inline box.
Screen: flow-root gives you a BFC onto a block box.
We can think about a grid container, to explain how this works. From the two-value world, we would create a block flat grid container with:
It ends up that we have. At Grade 3 of the Screen specification, the worth of display is defined as two key words. These keywords specify the outer worth of screen, which is inline or block and so define how the component behaves in the layout alongside other elements. They define how the direct children of that element behave — or the internal worth of the element.
If we wanted an inline grid in the world We’d use:
A bend or grid design starts out with you declaring screen: bend or screen: grid. These design methods are values of the CSS display property. We don’t to talk about this land on its own quite much, rather concentrating on the values of flex or grid, however, there are a number of interesting things to know about screen and the way it’s defined that can make your life a lot easier as you use CSS for design.
When you specify design on a box in CSS, you're defining what happens to this box concerning how it behaves concerning all the other boxes from the design . You are also defining the way the kids of the box act. You can think like this long before you can explicitly declare the worth just as two separate things, as the heritage keywords map to all those values, and it will help you understand what happens when you alter the value of screen .
It can be helpful to consider what happens if we do not mess up with the value of display at all when considering these inner and display properties. If you write a few HTML and view it will be Inline and Block Layout, or Normal Flow. The elements display as block or inline components.
And if using the values:
There are a couple other things explained by thinking about screen in this way, and I will take a peek at some of these in the remainder of this report.
These are all single values for your display home, defined before the specification has been updated to explain CSS Layout in this way. Something important about CSS is that the fact that we don't go around breaking the web; we can't just change things. We can't suddenly decide that everybody should use this syntax that is brand new and therefore every site ever built which utilized the single worth syntax fixes it and will break unless a programmer goes back!