Скачать или смотреть How to Change the Order of Items in a CSS Grid from Left-Right to Top-Down

Learn how to easily rearrange the layout of items in a CSS grid from left-to-right to top-to-bottom using simple CSS properties.
---
This video is based on the question https://stackoverflow.com/q/76875861/ asked by the user 'Husky' ( https://stackoverflow.com/u/152809/ ) and on the answer https://stackoverflow.com/a/76875969/ provided by the user 'Preben' ( https://stackoverflow.com/u/22294473/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Changing the order of items in a CSS grid from left-right to top-down

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Changing the Order of Items in a CSS Grid from Left-Right to Top-Down

When designing web pages, developers often face layout challenges. A common requirement is to display items in a specific order or orientation. Recently, someone encountered an issue while trying to display a list of tags in a CSS grid format. The goal was to change the typical left-to-right layout into a top-to-bottom ordering. This guide will guide you through a CSS-only solution to achieve this layout effortlessly.

The Problem Explained

In a typical CSS grid setup, items are organized in a row-wise manner. Here is an example of an unordered list (ul) with six items structured for a grid with three columns:

[[See Video to Reveal this Text or Code Snippet]]

Using the following CSS rules, the layout appears as:

[[See Video to Reveal this Text or Code Snippet]]

Resulting Layout

When viewed in a browser, the items are displayed as:

[[See Video to Reveal this Text or Code Snippet]]

However, the desired arrangement was to see the items in this format:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Using CSS Columns

Here's the good news: you can achieve this layout by using CSS columns instead of grid columns. This method is straightforward and only requires a small change to your CSS.

Step-by-Step Instructions

Update the CSS: Replace the current CSS grid properties with the columns property.

[[See Video to Reveal this Text or Code Snippet]]

The Final HTML and CSS Code: Your full code will look like this:

HTML:

[[See Video to Reveal this Text or Code Snippet]]

CSS:

[[See Video to Reveal this Text or Code Snippet]]

Benefits of This Method

Simplicity: Using the columns property simplifies the CSS and avoids the need for additional selectors like :nth-child and complex positioning rules.

Performance: A pure CSS solution is more efficient and avoids the overhead of JavaScript for simple layout tasks.

Conclusion

By switching from CSS grid columns to CSS columns, you can easily reorder your elements from a traditional left-right layout to a more visually appealing top-down format. This method is straightforward, clean, and effective for handling lists of items like tags. Whether you're creating tag clouds or multi-column layouts, understanding how to manipulate CSS properties enhances the versatility of your web design.

Have fun experimenting with your CSS layouts, and enjoy your day!