Css multi column grid

Содержание

Using multi-column layouts
Using columns
Column count and width
Example 1
HTML
CSS
Result
Example 2
HTML
CSS
Result
The columns shorthand
Example 3
HTML
CSS
Example 4
HTML
CSS
Result
Example 5
HTML
CSS
Result
Height balancing
Column Gaps
Example 6
HTML
CSS
Result
Conclusion
Found a content problem with this page?
Column layouts
Requirements
The recipes
A continuous thread of content — multi-column layout
A single row of items with equal heights — flexbox
Lining items up in rows and columns — grid layout
Browser compatibility
css.properties.column-width
css.properties.column-rule
css.properties.flex
css.properties.flex-wrap
css.properties.grid-template-columns
Resources on MDN
Found a content problem with this page?
MDN
Support
Our communities
Developers

Using multi-column layouts

The properties defined in the CSS multi-column layout module extend the block layout mode , enabling the easy definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.

Using columns

Column count and width

Two CSS properties control whether and how many columns will appear: column-count and column-width .

The column-count property sets the number of columns to a particular number. E.g.,

Example 1

HTML

div id="col"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p> p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. p> p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div>

CSS

Result

The content will be displayed in two columns:

The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

Example 2

HTML

div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS

Result

In a multi-column block, content automatically flows from one column into the next as needed. All HTML, CSS, and DOM functionality is supported within columns, as are editing and printing.

The columns shorthand

You can use either column-count or column-width . Because values for these properties do not overlap, it is often convenient to use the shorthand columns .

Example 3

In this example, the CSS declaration column-width: 12em is replaced by columns: 12em .

HTML

div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS

Example 4

In this example, the CSS declaration column-count: 4 is replaced by columns: 4 .

HTML

div id="columns_4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS

Result

Example 5

The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em . The column-count portion of the shorthand is the maximum number of columns that will be present. The column-width is the minimum width each column should be.

HTML

div id="columns_12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS

#columns_12  columns: 12 8em; >

Result

Assuming a default 1em gap between columns, if the container is wider than 103ems (12 columns * 8em width each + 7 1em gaps), there will be 12 columns, each with a width of 8ems or more. If the container is less than 103ems wide, there will be fewer than 12 columns. If the container is less than 17ems wide ( 8em column + 8em column + 1em gap), the content will be displayed as a single column with no column gap.

Height balancing

CSS columns require that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

Column Gaps

There is a gap between columns. The recommended default is 1em . This size can be changed by applying the column-gap property to the multi-column block:

Example 6

HTML

div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div>

CSS

#column_gap  column-count: 5; column-gap: 2em; >

Result

Conclusion

CSS columns are a layout primitive that can help make large blocks of text easier to read when responsive content is viewed on wide viewports. Imaginative developers may find many uses for them, especially in conjunction with container queries and with the automatic height balancing feature.

Found a content problem with this page?

This page was last modified on Jun 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Column layouts

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

Requirements

There are a number of design patterns you might want to achieve with your columns:

A continuous thread of content broken up into newspaper-style columns.
A single row of items arranged as columns, with all heights being equal.
Multiple rows of columns lined up by row and column.

The recipes

You need to choose different layout methods in order to achieve your requirements.

A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule .

You want your text to display in newspaper-like columns.
You have a set of small items you want to break into columns.
You do not need to target individual column boxes for styling.

A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting flex-direction to row , however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

There is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. Therefore to create gaps between items use a margin.

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap . These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you’ll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

For single rows or columns of items.
When you want to do alignment on the cross axis after laying out your items.
When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.

Lining items up in rows and columns — grid layout

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

For multiple rows or columns of items.
When you want to be able to align the items on the block and inline axes.
When you want items to line up in rows and columns.