To use columns in the content area,

1. Add a new content element
2. Choose type Grid Elements > 2 columns, 3 columns, or 4 columns, respectively., for 2, 3 or 4 columns in the content area
3. Enter a Header to identify the content area in the CMS backend (doesn't show on frontend page)
4. By default, the columns will be of equal width on all screen sizes. To change this behavior, select the appropriate Column 1, Column 2, etc. widths for each Desktop, and optionally also Small devices, Extra small, and Large, screen sizes. The default (unset) state of non-Desktop sizes will "linearize" content into a single column. If the total column widths selected exceeds 100%, the last column(s) may overflow into the next "row."
   
   The contents don't need to consume the same %-width of the screen at all sizes. For example, you might select 33% width for Desktop, 50% for Small screens, and unset (linearize) for extra small so the contents are in 3 columns for medium and large screens, 2 columns for small screens, and 1 column on extra small screens. Nielsen-Norman Group has a video to illustrate grid columns changing behavior as the screen size changes. In any case, what you choose here will depend on the content you are using. Here isn't a universal rule for what to choose, and it may require trial-and-error to see what arrangement works best for the particular type of content you are adding to the page.
   
   

   If you use grids, it's important to test your content on multiple screen widths to ensure that the content doesn't flow in an unusable way on either small, medium, or large screens. You can either preview the page and resize your browser window, or use the TYPO3 View module to set the Width to simulate different size screens.

Once the grid is created, you can add (either add new, or drag existing content elements into a column) contents to the grid.

1.  Click the +Content button in the appropriate column to insert a new content element in that column

or click an existing content record and drag it to the desired content position.

There is a bug that causes the moved content elements to display twice in the TYPO3 backend only. Previews and published pages correctly display the contents.