For the longest time, floats were the go-to tool for putting two things next to each other. Unfortunately, since this is not what floats were designed for, this created as many problems as it solved. Luckily, modern CSS makes this much easier to solve.

In this layout we need to be able to split the two children into fractional parts of the partents width while maintaining a gutter between them.

Let's say we start with the following basic markup.

export default function FormSideBar() {
  return (
    <div>
      <div>
        <h2>Personal Information</h2>
        <span>
          The information you provide will 
          be displayed publicly.
        </span>
      </div>
      <Form />
    </div>
  );
}

What we need to do is build a Split component that will fractionally split the width of the outer dive between the 

There is a couple of ways we could tackle this, but the easiest would be to use CSS grid:

const Split = styled.div`
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
`;

. This will create a grid container that puts a gap of 

 property allows us to define how many column tracks we have and how wide they should be. We define the width of each column track using any valid CSS size unit, and the quantity of tracks is determined by how many sizes we assign to the property. For example, if we wanted three column tracks of 

Looking back at the Split component above, you will notice that we are using a special size unit that you might not recognize. The 

 unit is a unique size unit only available when using CSS grid. The 

 unit (or the fraction unit as it is sometimes called) says to the browser, "give me X fraction(s) of the remaining space available." 

, which will result in two columns with a 50/50 split, like this:

, we are saying give me a percentage of the total width of my parent component. What that doesn't take into account is the gutter between the elements. So using 

The mockup above doesn't call for a 50/50 split though. The requirement is to split it into thirds, with the first column taking up only 1/3. Also, hard-coding column tracks do not make for a useful primitive. We need something more configurable that we can adjust to the situation. So let's make the following changes:

Now, instead of hard-coding values, we have named our fractions according to the ratio we want them to take and now we can update our FormSideBar component like this:

export default function FormSideBar() {
  return (
    <Split fraction="1/3">
      <div>
        <h2>Personal Information</h2>
        <span>The information you provide will be displayed publicly.</span>
      </div>
      <Form />
    </Split>
  );
}

Now we have a component that lets us fractionally split anything among two children.  The Split component works great for any time you want to put two elements next to each other, such as for side bars.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Creating A Split Component</h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210717063909221_cassie-matias-qrP_J5JosMg-unsplash.jpg" attachmentid="6f0ca83c-1f4a-493c-94eb-10f3ef5cb293" contenteditable="false" data-width="3240" data-height="2430"><div></div></figure><p>Photo by&nbsp;<a href="https://unsplash.com/@cass4504?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Cassie Matias</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/split?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Unsplash</a></p><p>For the longest time, floats were the go-to tool for putting two things next to each other. Unfortunately, since this is not what floats were designed for, this created as many problems as it solved. Luckily, modern CSS makes this much easier to solve.</p><p><br>Let's take the following layout:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210717080357739_split-final.png" attachmentid="cdb5254c-92cc-46e7-bcd2-96601bfef0f6" contenteditable="false"><div></div></figure><p><br>In this layout we need to be able to split the two children into fractional parts of the partents width while maintaining a gutter between them.<br><br>Let's say we start with the following basic markup.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-xygl7" id="cm-xygl7">export default function FormSideBar() {
  return (
    &lt;div&gt;
      &lt;div&gt;
        &lt;h2&gt;Personal Information&lt;/h2&gt;
        &lt;span&gt;
          The information you provide will 
          be displayed publicly.
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;Form /&gt;
    &lt;/div&gt;
  );
}</textarea><p><br>What we need to do is build a Split component that will fractionally split the width of the outer dive between the <code>div</code>&nbsp;that is wrapping the <code>h2</code>&nbsp;and <code>span</code>&nbsp;and the <code>Form</code>&nbsp;component.</p><p>There is a couple of ways we could tackle this, but the easiest would be to use CSS grid:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-uw0e7" id="cm-uw0e7">const Split = styled.div`
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
`;</textarea><p><br>In the above code, first we set the <code>display</code>&nbsp;property to <code>grid</code>&nbsp;and set the <code>gap</code> property to <code>1rem</code>. This will create a grid container that puts a gap of <code>1rem</code>&nbsp;between each of the children of the <code>Split</code> component.</p><p>In the final line we are setting the &nbsp;<code>grid-template-columns</code>&nbsp;property. The <code>grid-template-columns</code> property allows us to define how many column tracks we have and how wide they should be. We define the width of each column track using any valid CSS size unit, and the quantity of tracks is determined by how many sizes we assign to the property. For example, if we wanted three column tracks of <code>30px</code>, <code>50%</code>, and <code>2rem</code>, It would look like this:</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-B4WBP" id="cm-B4WBP">grid-template-columns: 30px 50% 2rem;</textarea><p><br>Looking back at the Split component above, you will notice that we are using a special size unit that you might not recognize. The <code>fr</code> unit is a unique size unit only available when using CSS grid. The <code>fr</code> unit (or the fraction unit as it is sometimes called) says to the browser, "give me X fraction(s) of the remaining space available." </p><p><br>If we set the <code>grid-template-columns</code> to be <code>1fr 1fr</code>, which will result in two columns with a 50/50 split, like this:</p><p></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210717090515105_split-1.png" attachmentid="0a33d992-327e-4c6f-b616-d3b85731329f" contenteditable="false"><div></div></figure><p><br>It is essential to distinguish that <code>fr</code> is not the same as <code>%</code>. When we use <code>%</code>, we are saying give me a percentage of the total width of my parent component. What that doesn't take into account is the gutter between the elements. So using <code>50% 50%</code> would result in an overflow, where <code>1fr 1fr</code> would not.</p><p><br>The mockup above doesn't call for a 50/50 split though. The requirement is to split it into thirds, with the first column taking up only 1/3. Also, hard-coding column tracks do not make for a useful primitive. We need something more configurable that we can adjust to the situation. So let's make the following changes:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-E6Fc0" id="cm-E6Fc0">const fractions = {
  "1/4": "1fr 3fr",
  "1/3": "1fr 2fr",
  "1/2": "1fr 1fr",
  "2/3": "2fr 1fr",
  "3/4": "3fr 1fr"
};

const Split = styled.div`
  display: grid;
  gap: 1rem;
  grid-template-columns: ${({ fraction }) =&gt;
    fractions[fraction] ?? fractions["1/2"]};
`;</textarea><p><br>Now, instead of hard-coding values, we have named our fractions according to the ratio we want them to take and now we can update our FormSideBar component like this:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-hVWT2" id="cm-hVWT2">export default function FormSideBar() {
  return (
    &lt;Split fraction="1/3"&gt;
      &lt;div&gt;
        &lt;h2&gt;Personal Information&lt;/h2&gt;
        &lt;span&gt;The information you provide will be displayed publicly.&lt;/span&gt;
      &lt;/div&gt;
      &lt;Form /&gt;
    &lt;/Split&gt;
  );
}</textarea><p><br>Now we have a component that lets us fractionally split anything among two children. &nbsp;The Split component works great for any time you want to put two elements next to each other, such as for side bars.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating A Split Component

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript