<commit_before>import React from 'react'
import { Container, Divider, Grid, Header, Image } from 'semantic-ui-react'

const InlineStyle = () => (
  <style>{`
    .grid {
      position: relative;
    }
    .grid:before {
      background-color: #F0F0F0;
      box-shadow: 0px 0px 0px 1px #DDDDDD inset;
      content: '';
      height: calc(100% - 2rem);
      left: 1rem;
      top: 1rem;
      position: absolute;
      width: calc(100% - 2rem);
     }
    .ui.divided.grid:before, .celled.grid:before {
      display: none;
    }
    .ui.aligned .column:after {
      display: none !important;
    }
    .grid .column:not(.row):not(.grid):after {
      background-color: rgba(86, 61, 124, .15);
      box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
      content: '';
      display: block;
      min-height: 50px;
    }
    @media only screen and (max-width: 768px) {
      .stackable.grid:before {
        width: 100%;
        left: 0em;
      }
    }
  `}</style>
)

const GridLayout = () => (
  <div>
    <InlineStyle />

    <Container text>
      <Header as='h1' dividing>Using Grids</Header>
      <Header as='h3'>Container</Header>
      <p>
        A container is a fixed width element that wraps your site's content. It remains a constant size and
        uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.
      </p>
    </Container>

    <Divider hidden />

    <Container>
      <Grid>
        <Grid.Row>
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
        </Grid.Row>
      </Grid>
    </Container>

    <Divider hidden />

    <Container text>
      <Header as='h3'>Text Container</Header>
      <p>
        Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is
        a special type of container optimized for a single flowing column of text, like this instructions on this page.
      </p>
      <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>

      <Grid>
        <Grid.Row columns={1}>
          <Grid.Column />
        </Grid.Row>
      </Grid>

      <Header as='h1' dividing>Grid Content</Header>
      <Header as='h3'>Column Flow</Header>
      <p>
        A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of
        <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the
        current row.
      </p>
      <Grid>
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
      </Grid>
<commit_msg>docs(layouts): fix typo in GridLayout (#2695)<commit_after>import React from 'react'
import { Container, Divider, Grid, Header, Image } from 'semantic-ui-react'

const InlineStyle = () => (
  <style>{`
    .grid {
      position: relative;
    }
    .grid:before {
      background-color: #F0F0F0;
      box-shadow: 0px 0px 0px 1px #DDDDDD inset;
      content: '';
      height: calc(100% - 2rem);
      left: 1rem;
      top: 1rem;
      position: absolute;
      width: calc(100% - 2rem);
     }
    .ui.divided.grid:before, .celled.grid:before {
      display: none;
    }
    .ui.aligned .column:after {
      display: none !important;
    }
    .grid .column:not(.row):not(.grid):after {
      background-color: rgba(86, 61, 124, .15);
      box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
      content: '';
      display: block;
      min-height: 50px;
    }
    @media only screen and (max-width: 768px) {
      .stackable.grid:before {
        width: 100%;
        left: 0em;
      }
    }
  `}</style>
)

const GridLayout = () => (
  <div>
    <InlineStyle />

    <Container text>
      <Header as='h1' dividing>Using Grids</Header>
      <Header as='h3'>Container</Header>
      <p>
        A container is a fixed width element that wraps your site's content. It remains a constant size and
        uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.
      </p>
    </Container>

    <Divider hidden />

    <Container>
      <Grid>
        <Grid.Row>
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
          <Grid.Column />
        </Grid.Row>
      </Grid>
    </Container>

    <Divider hidden />

    <Container text>
      <Header as='h3'>Text Container</Header>
      <p>
        Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is
        a special type of container optimized for a single flowing column of text, like these instructions on this page.
      </p>
      <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>

      <Grid>
        <Grid.Row columns={1}>
          <Grid.Column />
        </Grid.Row>
      </Grid>

      <Header as='h1' dividing>Grid Content</Header>
      <Header as='h3'>Column Flow</Header>
      <p>
        A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of
        <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the
        current row.
      </p>
      <Grid>
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
        <Grid.Column width={4} />
      </Grid>

{'fraction_non_alphanumeric': 0.13475066437392527, 'fraction_numerical': 0.020009379396592152, 'mean_word_length': 1.871633752244165, 'pattern_counts': {'":': 0, '<': 151, '<?xml version=': 0, '>': 155, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '945909', 'n_tokens_mistral': 2082, 'n_tokens_neox': 1953, 'n_words': 583}