Css – difference between justify-self, justify-items and justify-content in CSS grid

csscss-grid

I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid.

So, I've tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows:

justify-items – Aligns the content inside a grid item along the row axis

justify-content – This property aligns the grid along the row axis

justify-self – Aligns the content inside a grid item along the row axis

But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.

Is the justify-items property in Flex-box the same as the
justify-items property in Grid? or are they different somehow?
(In other words, can I reuse Flex-box documentation for Grid)
What do (justify-)content, self and items do?
How are (justify-)content, self and items different?

Any clarification would be greatly appreciated.

Edit: Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.

Best Answer

To answer your questions:

As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN

2-3

This screen shot from W3 does an excellent job of showing what they do and the differences between them.

Good To Knows:

For more information and example, I would suggest you check out:

And for some inspiration:

https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Related Solutions

Css – the difference between visibility:hidden and display:none

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

Css – What’s the difference between SCSS and Sass

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

CSS variables are supported and can be utilized but not as well as pre-processor variables.

For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.