layout-grid property

Specifies the composite document grid properties that specify the layout of text characters.

Syntax

layout-grid: mode type line char

Property values

One or more of the following values, in the order specified:

mode: Any of the range of mode values available to the layout-grid-mode property.
type: Any of the range of type values available to the layout-grid-type property.
line: Any of the range of line values available to the layout-grid-line property.
char: Any of the range of character values available to the layout-grid-char property.

CSS information

Applies To	All elements
Media	visual
Inherited	1
Initial Value	both loose none none

Standards information

There are no standards that apply here.

Remarks

Microsoft Edge supports the unprefixed version (layout-grid) of this property.

Though you don't have to specify all four values for the layout-grid attribute, they must be listed in the order given in Possible Values.

Web documents in Asian languages, such as Chinese or Japanese, usually create a page layout for characters using a one-dimensional 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 attribute to specify character layout for a block of text.

HTML


<!DOCTYPE html>

<html>
<head>
  <title>layout-grid</title>
  <style>
    .layout {
      layout-grid: both fixed 12px 12px; 
    }
  </style>
</head>
<body>
  <div class="layout">
    This is a block element containing a sentence of sample text.
  </div>
</body>
</html>