The CSS layout-grid property is a shorthand property used to set the layout-grid-mode, layout-grid-type, layout-grid-line, layout-grid-char, and layout-grid-char-spacing properties using a single property notation. It is used because Asian languages often employ page layout for characters to achieve better visual formatting using a one or two-dimensional grid. Each value is separated by a white space.
Values[]
| Value | Description |
|---|---|
<layout-grid-mode> |
See layout-grid-mode for values.
|
<layout-grid-type> |
See layout-grid-type for values.
|
<layout-grid-line> |
See layout-grid-line for values.
|
<layout-grid-char> |
See layout-grid-char for values.
|
<layout-grid-char-spacing> |
See layout-grid-char-spacing for values.
|
HTML example:
<div style="layout-grid:both loose 15px 15px 2cm;"> Content snapped to a layout grid.</div>
CSS example:
div {
layout-grid:both loose 15px 15px 2cm;
}