CSS grid question

HTML-CSS
1

I´m wrapping my head around how grid and flex orient the page. In this regard, I have a question about the following phenomenon:

On Mozilla´s Code Pen

<span class="flex">
  Some text <em>emphasized text</em>
</span>

.flex {
  border: 5px solid #ccc;
  display: flex;
}

body {
  padding: 1em;
  font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}

When it is Flex, it behaves like this:
Some text emphasized text

When it is Grid, like this:
Some text
emphasized text

I don´t quite get the distinction because don´t Grid and Flex behave as block elements?

What am I missing in the constitution of Flex and Grid that I don´t understand this behavior?

2

Here´s the link to the CodePen:

Mozilla CodePen

3

“Grid and flexbox. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.”

In your example we have the following:
When you set a ‘flex’ value for the display property you get one row with two HTML elements side by side (one-dimensional flexbox container: from left to right). When it comes to the ‘grid’ value for the same property, you get two elements in one column: “Some text”, and ‘em’ (two-dimensional grid container - one column and two rows - from left to right and from top to bottom). “span” becomes grid container. To understand better, press F12 and change the screen size on the left. Of course, both ‘display’ properties usually go with one or more corresponding properties. For example:

  display: grid;
  grid-template-columns: auto auto auto;

or

  display: flex;
  flex-direction: column;
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.