<commit_before>import React from 'react';
import Main from '../components/layout/Main';
import CodeBlock from '../components/CodeBlock';
import DevHomework from '../components/layout/DevHomework';
import CodepenLink from '../components/CodepenLink';

const Tutorial = () => (
  <div>
    <h2>Your First Grid</h2>

    <h4>Create a grid</h4>
    <p>
      The first thing we want to do is create a grid container. We can do this by declaring{' '}
      <code>display: grid</code> on the container element. In this example we are using a div with
      the class of <code>container</code>.
    </p>

    <h4>Define rows and columns</h4>
    <p>
      There are several ways to define rows and columns. For our first grid, we will use properties
      <code>grid-template-columns</code> and <code>grid-template-rows</code>. These properties allow
      us to define the size of the rows and columns for our grid. To create two fixed-height rows
      of 150px and three fixed-width columns of 150px, simply write:<commit_msg>Missing space between properties and code element<commit_after>import React from 'react';
import Main from '../components/layout/Main';
import CodeBlock from '../components/CodeBlock';
import DevHomework from '../components/layout/DevHomework';
import CodepenLink from '../components/CodepenLink';

const Tutorial = () => (
  <div>
    <h2>Your First Grid</h2>

    <h4>Create a grid</h4>
    <p>
      The first thing we want to do is create a grid container. We can do this by declaring{' '}
      <code>display: grid</code> on the container element. In this example we are using a div with
      the class of <code>container</code>.
    </p>

    <h4>Define rows and columns</h4>
    <p>
      There are several ways to define rows and columns. For our first grid, we will use properties 
      <code>grid-template-columns</code> and <code>grid-template-rows</code>. These properties allow
      us to define the size of the rows and columns for our grid. To create two fixed-height rows
      of 150px and three fixed-width columns of 150px, simply write:
{'fraction_non_alphanumeric': 0.10187409899086977, 'fraction_numerical': 0.011532916866890917, 'mean_word_length': 3.319502074688797, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 41, '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': '1045772', 'n_tokens_mistral': 596, 'n_tokens_neox': 580, 'n_words': 253}