layout-grid-mode property
Specifies whether the text layout grid uses two dimensions.
![]() |
Syntax
layout-grid-mode: both | none | line | char
Property values
both-
Default. Both the char and line grid modes are enabled. This setting is necessary to fully enable the layout grid on an element.
none-
No grid is used.
line-
Only a line grid is used. This is recommended for use with inline elements, such as a span, to disable the horizontal grid on runs of text that act as a single entity in the grid layout.
char-
Only a character grid is used. This is recommended for use with block-level elements, such as a blockquote, where the line grid is intended to be disabled.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
There are no standards that apply here.
Remarks
Microsoft Edge supports the unprefixed version (layout-grid-mode) of this property.
Web documents in Asian languages, such as Chinese or Japanese, usually create a page layout for characters using a one- or two-dimensional grid. You can use the layout-grid attribute to incorporate this layout into Web documents.
Examples
This example uses the layout-grid-mode attribute to specify character layout for a block of text.
<!DOCTYPE html> <html> <head> <title>layout-grid-mode</title> <style> .layout { layout-grid-mode: line; } </style> </head> <body> <div class="layout"> This is a block element containing a sentence of sample text. </div> </body> </html>
See also
