layout-grid property

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

Internet Explorer 9

 

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 ToAll elements
Mediavisual
Inherited1
Initial Valueboth 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.


<!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>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Show: