CSS Columns

100%

✓ Published1🌍 Public

Last edited Jan 31, 2023

Created on Jan 31, 2023

This example demonstrates text content arranged in multiple columns using CSS multi-column layout. The page shows a series of paragraphs flowing across four columns defined with the `columns: 4 250px` property, with a three-pixel solid column rule and a three-rem gap separating them. One quote is styled with a larger font, centered text, and a `column-span: all` property to break across all columns, while the author attribution uses `white-space: nowrap` to prevent line breaks. The code relies on the standard CSS Multi-column Layout module and the Roboto font loaded from Google Fonts.

AI-generated description

https://youtu.be/OXGznpKZ_sA?t=11567

MIT Licensed

Similar vizzes

Loading thumbnail…

CSS Floats

This example demonstrates how CSS floats affect the layout of text and block elements within an HTML document. It uses standard HTML elements and the CSS properties `float`, `margin`, and `display: flow-root` to create left- and right-floating black squares that wrap surrounding paragraph text. The page pulls the Roboto font from Google Fonts via `@import` and applies it to the body, while the `section` element showcases `flow-root` to contain nested floats. No JavaScript or external visualization libraries are used; the effect relies entirely on core CSS.

WWRCIECH

72% match

Loading thumbnail…

CSS Flexbox

A CSS Flexbox layout demonstrates responsive box arrangement using the Flexbox model. Six numbered black boxes with white text are centered within a bordered container, wrapping onto multiple lines with a one-rem gap between them. The code uses `display: flex`, `justify-content`, `align-items`, `flex-flow`, and `align-content` properties to control alignment and wrapping. It imports the Roboto font from Google Fonts and applies a plain HTML structure with no JavaScript or external data sources.

WWRCIECH

70% match

Loading thumbnail…

CSS grid...

This example demonstrates a simple CSS grid layout, showing four numbered boxes arranged in a two-column structure with additional space for a third column and second row. The boxes are styled with a grey background, centered text, and rounded borders. The grid uses explicit track sizes, including fixed pixel widths and an auto-sized column, with a gap between items. The stylesheet also includes global body resets and red, semi-transparent circles, though no circles appear in the markup. The code relies only on HTML and CSS, without any JavaScript libraries.

QQuvee

69% match

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

WWRCIECH

69% match

Loading thumbnail…

Fork of CSS Flexbox 2

This example demonstrates CSS Flexbox layout behavior using two numbered boxes inside a bordered container. The `style.css` file applies `display: flex` with `justify-content: center`, `align-items: center`, and `flex-flow: row nowrap` to center items both horizontally and vertically, while the second box uses an `order: -1` property to reverse its visual position. Custom flex properties (`flex: 1 1 40%` and `flex: 2 2 40%`) control relative sizing and growth, with `gap: 1rem` adding spacing between items. The HTML structure includes commented-out boxes 3–6, leaving only two visible elements rendered in black with white text.

WWRCIECH

66% match

Loading thumbnail…

CSS Grid work

This example demonstrates a CSS Grid layout using four colored panels arranged in an asymmetric pattern within a full-viewport section. The grid defines named areas—left, center, centerone, and right—to position the crimson divs across rows and columns with gaps. It uses pure CSS grid-template-areas and grid-template-rows to control the layout, while the HTML page includes no JavaScript or external frameworks. The visualization highlights how grid-area assignments and fractional row units (1fr) create a responsive, non-uniform structure.

LLaurens

66% match

Loading thumbnail…

CSS Starter

A static HTML page styled with CSS demonstrates a text-heavy layout for learning CSS. The page contains a header and a main paragraph of placeholder text, styled with a custom stylesheet. The CSS applies a universal reset, sets container width to 50%, adds a dashed red border, and adjusts font size, padding, and margin. The example uses no JavaScript or data visualization libraries; it relies solely on the `style.css` file to render basic typographic and box-model properties.

WWRCIECH

65% match

Loading thumbnail…

Hyphenation

This example demonstrates how CSS hyphenation automatically breaks a long quotation to fit a narrow text column, creating a justified, evenly spaced block of text. The HTML contains a single sentence from Oscar Wilde, while the CSS sets a fixed width, serif typography, and text justification. The `hyphens: auto` property, combined with the `lang` attribute implied by the content, enables automatic hyphenation. The JavaScript file only contains a commented-out alert, so no interactive behavior occurs. The dabblet is styled using standard CSS without external libraries.

AAlexZ33

62% match