HTMLPLUS

Grid

It's the most flexible and powerful grid system which you need to build simple to complex responsive layouts, using two main components, plus-grid as a container & plus-grid-item. By using these components, align your content in any form & shape and for all screen sizes with 12 available column sizes and 6 breakpoints.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusGrid

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
alignContent
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
'stretch'
Aligns contents vertically across all rows (It overrides alignItems).
Name
alignContentLg
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for large display sizes (It overrides alignItemsLg).
Name
alignContentMd
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for medium display sizes (It overrides alignItemsMd).
Name
alignContentSm
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for small display sizes (It overrides alignItemsSm).
Name
alignContentXl
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for extra-large display sizes (It overrides alignItemsXl).
Name
alignContentXs
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for extra-small display sizes (It overrides alignItemsXs).
Name
alignContentXxl
Type
"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch""around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"
Default
undefined
Aligns contents vertically across all rows for extra-extra-large display sizes (It overrides alignItemsXXl).
Name
alignItems
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
'stretch'
Aligns contents vertically inside their own row.
Name
alignItemsLg
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for large display sizes.
Name
alignItemsMd
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for medium display sizes.
Name
alignItemsSm
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for small display sizes.
Name
alignItemsXl
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for extra-large display sizes.
Name
alignItemsXs
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for extra-small display sizes.
Name
alignItemsXxl
Type
"center" | "end" | "start" | "stretch""center" | "end" | "start" | "stretch"
Default
undefined
Aligns contents vertically inside their own row for extra-extra-large display sizes.
Name
gutter
Type
stringstring
Default
undefined
Adds a gap between contents to make space between them vertically and horizontally.
Name
gutterX
Type
stringstring
Default
undefined
Adds a gap between contents to make space between them horizontally.
Name
gutterY
Type
stringstring
Default
undefined
Adds a gap between contents to make space between them vertically.
Name
justifyContent
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
'start'
Justifies contents horizontally.
Name
justifyContentLg
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for large display sizes.
Name
justifyContentMd
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for medium display sizes.
Name
justifyContentSm
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for small display sizes.
Name
justifyContentXl
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for extra-large display sizes.
Name
justifyContentXs
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for extra-small display sizes.
Name
justifyContentXxl
Type
"around" | "between" | "center" | "end" | "evenly" | "start""around" | "between" | "center" | "end" | "evenly" | "start"
Default
undefined
Justifies contents horizontally for extra-extra-large display sizes.
Name
reverse
Type
booleanboolean
Default
undefined
Reverses the flow of contents from left-to-right to right-to-left, or vice-versa.
Name
vertical
Type
booleanboolean
Default
undefined
Changes the flow of contents from left-to-right to top-to-down.
Name
wrap
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
'on'
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width.
Name
wrapLg
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for large screen devices.
Name
wrapMd
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for medium screen devices.
Name
wrapSm
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for small screen devices.
Name
wrapXl
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for extra-large screen devices.
Name
wrapXs
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for extra-small screen devices.
Name
wrapXxl
Type
"off" | "on" | "reverse""off" | "on" | "reverse"
Default
undefined
Controls allowing the container to wrap the content or not if the cumulative width size of contents is more than the twelve-column width for extra-extra-large screen devices.
Name
default
The default slot.
Name
--plus-grid--gutter-x
TODO
Name
--plus-grid--gutter-y
TODO

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item xs="12" md="4">        
        <div>
          xs=12, md=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" md="4">        
        <div>
          xs=12, md=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" md="4">        
        <div>
          xs=12, md=4
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item xs="grow">        
        <div>
          xs=grow
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          xs=grow
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          xs=grow
        </div>        
      </Grid.Item>      
    </Grid>    
    <Grid>      
      <Grid.Item xs="12" md="2">        
        <div>
          xs=12, md=2
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          xs=grow
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" md="2">        
        <div>
          xs=12, md=2
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid gutter="lg">      
      <Grid.Item xs="12" sm="6" lg="5">        
        <div>
          xs=12, sm=6, lg=5
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" lg="4">        
        <div>
          xs=12, sm=6, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="3">        
        <div>
          xs=12, sm=7, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="3">        
        <div>
          xs=12, sm=5, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="4">        
        <div>
          xs=12, sm=5, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="5">        
        <div>
          xs=12, sm=7, lg=5
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid gutterX="md">      
      <Grid.Item xs="12" sm="6" lg="5">        
        <div>
          xs=12, sm=6, lg=5
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" lg="4">        
        <div>
          xs=12, sm=6, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="3">        
        <div>
          xs=12, sm=7, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="3">        
        <div>
          xs=12, sm=5, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="4">        
        <div>
          xs=12, sm=5, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="5">        
        <div>
          xs=12, sm=7, lg=5
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid gutterY="md">      
      <Grid.Item xs="12" sm="6" lg="5">        
        <div>
          xs=12, sm=6, lg=5
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" lg="4">        
        <div>
          xs=12, sm=6, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="3">        
        <div>
          xs=12, sm=7, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="3">        
        <div>
          xs=12, sm=5, lg=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="5" lg="4">        
        <div>
          xs=12, sm=5, lg=4
        </div>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="7" lg="5">        
        <div>
          xs=12, sm=7, lg=5
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center">      
      <Grid.Item xs="6">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          Item
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid {
  background-color: #EEEEEE;
  height: 8rem;
}
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignContent="center">      
      <Grid.Item xs="6">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          Item
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid {
  background-color: #EEEEEE;
  height: 8rem;
}
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center">      
      <Grid.Item xs="grow" alignSelf="start">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow" alignSelf="end">        
        <div>
          Item
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid {
  background-color: #EEEEEE;
  height: 8rem;
}
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="center">      
      <Grid.Item xs="2">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          Item
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid reverse>      
      <Grid.Item xs="2">        
        <div>
          Item 1
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          Item 2
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          Item 3
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid wrap="off">      
      <Grid.Item xs="6">        
        <div>
          xs=6
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          xs=2
        </div>        
      </Grid.Item>      
      <Grid.Item xs="6">        
        <div>
          xs=6
        </div>        
      </Grid.Item>      
      <Grid.Item xs="2">        
        <div>
          xs=2
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item xs="3">        
        <div>
          xs=3
        </div>        
      </Grid.Item>      
      <Grid.Item offsetXs="3" xs="3">        
        <div>
          offset-xs="3", xs=3
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          xs=3
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item orderXs="3" xs="grow">        
        <div>
          order=3
        </div>        
      </Grid.Item>      
      <Grid.Item orderXs="2" xs="grow">        
        <div>
          order=2
        </div>        
      </Grid.Item>      
      <Grid.Item orderXs="1" xs="grow">        
        <div>
          order=1
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item hideSm xs="3">        
        <div>
          xs=3, hide-sm
        </div>        
      </Grid.Item>      
      <Grid.Item hideMd xs="4">        
        <div>
          xs=4, hide-md
        </div>        
      </Grid.Item>      
      <Grid.Item hideLg xs="5">        
        <div>
          xs=5, hide-lg
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  padding: 0.5em;
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center" vertical>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <div>
          Item
        </div>        
      </Grid.Item>      
      <Grid.Item xs="3">        
        <div>
          Item
        </div>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid {
  height: 12rem;
}
plus-grid div {
  color: #00BCD4;
  border: 1px solid #FFFFFF;
  background-color: #E0F7FA;
  height: 100%;
  padding: 0.5em;
  text-align: center;
}
Contributors
Prev
Drawer
Next
Intersection
SELECT YOUR FRAMEWORK
React logo
React