Original: the When And How the To the Use CSS Multi-Column Layout
Author: Rachel Andrew
Translator: Bo Hin
When we put the attention on CSS Gridthe layout and CSS Flexboxlayout, they often ignore another layout method. In this article, I will introduce multi-column layout - commonly referred to as multicolor "the Columns CSS" . Through this article, you learned to use columnsbest practices, as well as the use of some columnsprecautions.
What is Multicol?
multicolThe basic idea is that you can put a large piece of content to the multiple columns, like a newspaper. You can use one of two properties to accomplish this. You can use the cloumn-countproperty to specify the number of columns content. You can also use column-widthproperties to specify the desired column width, so the browser to determine the appropriate number of columns.
No matter what your content contains elements, when you convert it to a multi-column layout, everything will work from the content stream, but the column will show the form. This makes the multicollayout and now common in browsers other layouts will be different. For example Flexboxand Gridacquire container elements child elements, so that these sub-elements involved flexand gridlayout in the past. Use multicol, within each column, you also get a normal content stream.
In the following example, we are using column-width, the minimum column width 14em. MulticolWill allocate as much as the width 14emof the column, then, let each column share the remaining space. At least the width of each column 14em, unless the container is smaller than the width 14em, it will only show one. multicolAlso CSSin an act for the first time, you can create a column, but also in line with the default response type rules. You do not increase the CSS query ( Media Queries), modify the number of columns for each breakpoint, but to develop an optimum width, so that the browser itself for processing.
// 核心代码摘录
.container {
max-width: 800px;
margin: 0 auto;
column-width: 14em;
}复制代码Column style
When you use the column properties ( columns) to create the layout when cloumns boxthe content could not be located. You can not use JavaScriptto locate, you can not specify a unique style for a single column, such as background color, margins, padding, and so on. All column boxeswill remain the same size. The only thing you can do is to use the column-ruleproperty to add rules between columns, similar to the role of the property border. You can also use the column-gapproperty to control the gaps between the columns, the default value of the property 1em, but you can also be changed to any valid length units.
// 核心代码
.container {
max-width: 800px;
margin: 0 auto;
column-width: 14em;
column-gap: 2em;
column-rule: 1px solid #ccc;
}复制代码This is a multicolbasic function. You can split a large content column. Content will turn to fill each column, including the direction and with the creation of these columns. You can control the gap between the columns and the rules, use the bordersame values can be. So far, all of the above in your browser to get good support, and has been around for a long time, making the specification backwards compatibility is very safe.
You may want to consider some other things the use of columns, as well as some potential issues to be aware of when using the column on the Web.
Hurdle
Sometimes, you may want to break down some of the content is also listed, the use of an element across these columns. The columns-spanproperty used to multicolbe to achieve this.
The following example, I use a <blockquote>element to span columns. Note that, when performing this operation, the content is divided into two regions, each is positioned at the column-spanupper and lower parts of the elements. Content will not skip a set column-spanof elements.
column-span
Property has been implemented in Firefox, and backward compatibility.
// 核心代码
blockquote {
font: 2em 'Berkshire Swash', cursive;
margin: 0;
column-span: all;
text-align: center;
}
.container {
max-width: 800px;
margin: 0 auto;
column-width: 14em;
column-gap: 2em;
column-rule: 1px solid #ccc;
}复制代码You know, the current norms, column-spanvalues only all, or none. If you want to achieve in newspaper style, can be used in conjunction with other multi-column layout layout to achieve. In the following example, we achieve a container with two column grid rails (Grid). The width of the track is on the left 2fr, the width of the right side of the track is 1fr. We left the track into a two-column with a multicolcontainer. It also contains an element of hurdles.
On the right, we will put the contents of the second Gridcolumn of the track. By trying a variety of layout method, we can figure out exactly fit the layout method for the task at hand - do not be afraid to mix and match!
// 核心代码
.container {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-gap: 1em;
grid-template-columns: 2fr 1fr;
align-items: start;
}
.container article {
column-count: 2;
column-gap: 2em;
column-rule: 1px solid #ccc;
}
.container aside {
border-left: 1px solid #ccc;
padding: 0 1em;
}复制代码A cutoff control
If your content is included in the title, you might want to avoid title appears at the end of the column, and the content has appeared in the next column. As another example, your content with a picture of some text, then Ideally, pictures and his text, will remain a whole show without being split across columns.
When you split column content, this behavior is known as CSS fragments module (Fragmentation) . The content is divided into two on display, just like a printer printing mode select two columns of the same. Thus, other methods on the layout of the Web compared to multicolthe closest Paged Medialayout method. Therefore, we can use the property belonging to the CSS2.1 page-breakto achieve this.
page-break-beforepage-break-afterpage-break-inside
Recently, the CSS fragments module specification defines attributes fragmentation module fragments the context of how the various design specifications include Paged Media, multicoland a region style (Region Styling) at a standstill; will support display region is decomposed (fragmented) continuous content. By using these common attributes, they may be applied to any future CSS fragments module context, as Flexboxthe property is moved to align Box Alignmentthe specification, like, so that they can Gridand Blockuse the layout.
break-beforebreak-afterbreak-inside
In the following example, I <figure>use the element break-inside avoidproperties that prevent separation of the image and title. Support the property browser, we should see the effect of the joint together, even if that results in the contents of the column looks unbalanced.
// 核心代码
figure {
margin: 0;
break-inside: avoid;
}
.container {
max-width: 800px;
margin: 0 auto;
column-width: 14em;
}复制代码Unfortunately, in multicolsupport of these attributes are very incomplete. Even in the case of support, they should be seen as a suggestion, because in actual use will be made a lot of requirements to control whether content should be separated, but in fact the browser and does not really let them separate from the content. In the above example, we define the priority show, but when you use or be careful and use only where it is most needed.
Some problems Columns Layout
When we browse the Web, and did not see multicolbeing widely used, the reason is reading habits of readers, usually top-down scrolling to read. For people to use English, or other vertical writing, the horizontal layout is not a good reading experience.
If you fixed height of the container, for example, viewportthe unit vh, when the content is too large, it will inline direction of the overflow, while, you will get a horizontal scroll bar.
These cases are not very satisfactory. So, when using a multi-column layout, we need to carefully consider the amount of content for each column.
Columns overflow block
In the Level 2specification which, we consider how to use a method, the contents of the column does not overflow, generated lateral scroll bar, but in the column direction to generate a new block above. This means that you can have a high degree of having multicola container, and once the content exceeds the width of the container, it will create a new set are listed below. It looks a bit like crossing our example above, however, not to make a set column-spanof elements results in a new column box to start, but by the block size limit of the width of the container, so as to solve the problem of overflow.
This feature will enable multicolto the Web more useful. Although we are still some distance, but you can focus on the issue of the CSS Working Group repurchase . If you have other use cases for this feature, please post them, it is very useful when designing new features.
Today, how do we use Multicol?
Using the current standard, it is not recommended to split all the contents of the column regardless of the rolling problem. However, in some cases, multicolto webbe ideal. When viewing the design mode, there are enough examples of k for your reference.
UI text element or folded small
multicolCan be used anywhere you need to take up less space in the list of projects. For example, a simple list or a list of names check box. Usually in these cases, the visitor will not read one and then return to the top of the next column, but scanning the content to click to select the check box or item to be selected. Even if you do make scrolling experience, the problem still exists.
You can DonarMuseum website to see Sander de Jong used in this way of multicolexamples.
Confirm the contents of a small amount
Sometimes, we design a website, we know that some of the content area is relatively small and fit most screen display, and does not require scrolling. I Notist demo page used multicolfor introduction speech.
Andy Clarke is Equfund website design a lovely example.
In order to avoid the very small screen leading to scroll the page appears, just as the width, you can use media queries to check the height. For content beyond the minimum height, you can set a breakpoint min-heightto avoid the use of smaller user equipment brings poor experience.
SUMMARY cascade (MASONRY-LIKE) Show
Another local multi-column layouts work beautifully if you want to create content waterfall displays. MulticolIt is currently the only, you can create highly uncertain layout method. GridEither arrangement will leave a gap or stretch the project to form a strict two-dimensional grid.
Veerle Pieters has a good example of that is her inspiration pages used in this manner multicol.
Grid and alternatives Flexbox
These column-properties can also be used Gridand Flex layout options. If you specify a property on which the container is used display: flexor display: gridto remove any column behavior, it is converted to the container Flexor Gridlayout. For example, if you have to use a Gridcard layout layout, if it instead of running in the column on the page, then the layout is readable, you can use multicolas a simple backup. Does not support the Gridbrowser will multicolshow support for Gridthe browser will get Grid Layout.
Do not forget Multicol!
I always answer Gridand Flexboxquestion, the answer is not to use Gridor Flexboxinstead try Multicol. You may not use it on each site, but when you encounter scenes mentioned in this article, it can be very useful. On MDN about multicol and CSS fragments module to helpful resources.
If you have a project in multicolother usage scenarios, also welcome message to share!
This article has contacted the original author and to authorize the translation, reprint please retain the original link
Reproduced in: https: //juejin.im/post/5cfc2ff76fb9a07f0a2dd290