CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Build Responsive React Text Elements With InlineCluster
slug: inline-cluster
description: Text in a paragraph is one of the best examples of "responsive by default." Text will wrap and cluster according to the text alignment. In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/h5xtr38yv4
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_05
---

The great thing about lines of text on the web is that they are responsive by default. When there is no more room in the inline direction, the words will wrap to the following line, clustering according to the justification of the text.

![Example of text justification](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.05/public/assets/text-example.png)

The goal of the primitive that we will learn in this lesson is to do exactly that, put elements inline and cluster them according to the justification set to the primitive.

## The problem: the Menu Bar

In this lesson, we are going to build out the following widget:

![Menu Bar mockup wide](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.05/public/assets/inline-cluster-red-wide.png)

This widget will have a list of links that are consistently spaced and vertically aligned. When the inline space is too small to fit them on a single row, the elements need to wrap, keeping a consistent space between them.

![Menu Bar mockup narrow](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.05/public/assets/inline-cluster-red-line.png)

## The Solution

Once again, let's start with the basic markup, and [you can follow along by going to the codesandbox.io starter project for this lesson](https://codesandbox.io/s/menu-example-starter-4swh9):

```jsx { actualFilename=./protected/inline-cluster-0.js endChar=306 endLine=17 startChar=0 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.05/protected/inline-cluster-0.js }
import React from "react";
import Menu from "./Menu";

export default function MenuBar() {
 return (
 <Menu>
 <div>
 Product
 Features
 Marketplace
 Company
 Log in
 </div>
 </Menu>
 );
}
```

And this is how it looks:

![Menu Bar step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.05/public/assets/inline-cluster-0.png)

Let's start by getting our items in the correct location in the MenuBar:

```jsx { actualFilename=./protected/inline-cluster-1.js endLine=13 startLine=6 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.05/protected/inline-cluster-1.js#L6 }
const InlineCluster = styled.div`
 display: flex;
 flex-wrap: wrap;

 justify-content: flex-end;

 align-items: center;
`;
```

In the first two lines, we set the display to `flex`, putting all items inline in a row. We are also setting the `flex-wrap` to `wrap` so that the items will wrap to a new row when it runs out of room in the inline direction.

The following two lines allow us to position the items. `justify-content` lets you justify your items on the main axis, which is horizontally in our context. It might help to think of setting the text justification in a Word or Google doc. Setting it to `flex-end` moves it to the end of the inline row.

The other important line is the `align-items` property. This property allows you to position the elements on the cross axis, which means vertically given our context.

Text in a paragraph is one of the best examples of "responsive by default."  Text will wrap and cluster according to the text alignment.  In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.