My colleague, Bern Szukalski, says it well in his website:” Authoring online maps is simple, although authoring a really excellent map requires a bit of extra thought and tradecraft”. One of the keys to producing fantastic charts is custom pop-ups. Planning out your pop-up’s design, as well as the material kind, is half the battle. A text aspect is all that is necessary to create an informative and visually appealing pop-up for some. You can explain attributes and important information in a paragraph, board, list, or a combination of those. This can be accomplished using Map Viewer’s rich text editor, but frequently refinement calls call for using Hypertext Markup Language ( HTML).  ,  ,
HTML is the terminology used to determine the content, structure, and layout of website content. The development team is constantly looking to expand ArcGIS Online’s list of supported HTML to make it easier to obtain your design goals because HTML is such an important tool for creating great content. In the November 2024 release, we made some interesting additions, particularly support for and network.  ,
What are network and flexbox CSS?
When talking about the look of web content, Cascading Style Sheet ( CSS) is often brought up. Both the CSS layouts Flexbox and Grid are. Because they make it simpler to create flexible, adaptable, and complex layouts, they are important building blocks for present web pages. This makes flexbox and grid , a powerful tool for creating laborate pop-ups that work everywhere in the ArcGIS ecosystem. Let’s go over each layout system and their key ideas before going into detail about how to use flexbox and grid in your pop-ups.  ,
Flexbox
Flexbox is a one-dimensional layout system. By one-dimensional, I mean that you can create either a column or row layout. In the diagram below, you’ll see a container with items inside. By setting the display property to flex, a flexbox container is defined. The items that are contained in a flex container are called flex items. The flex-direction property, which can be either a column or a row, determines the flex items ‘ orientation. Axes are a crucial concept in terms of flex direction. There are two axes, a main axis and a cross axis. For example, when the flex direction is set to column, the main axis is vertical, and the cross axis is horizontal. When determining the content’s alignment, axes are crucial to keep in mind.  ,
Grid
A two-dimensional layout system called a grid allows you to combine columns and rows. This makes it simple to create complicated but manageable layouts. A container and items that act like cells in a table are the components of grids. However, grid layouts should not be confused with tables. Grid CSS is a method for creating the layout of HTML elements in a container, whereas tables are used to display tabular data. A web page could be represented by a container.  ,
By setting the display property to grid, the grid container is created. The number and width of columns and rows within the grid are defined using the grid-template-columns and grid-template-rows properties. Each property value determines the width of the respective column or row, while each property value is a space-separated list. The number of values dictates the number of columns/rows.
Let’s apply these grid concepts in a simple example. Let’s say you want to create a grid with two columns in your pop-up with three items in it. In your situation, you want the columns to be 200 pixels wide. The HTML and pop-up would look something like this:  ,
<div style="display: grid; grid-template-columns: 200px 200px; grid-template-rows: auto; gap: 5px;"><div style="border-style: solid;">Item 1</div><div style="border-style: solid;">Item 2</div><div style="border-style: solid;">Item 3</div></div>Flexbox vs. grid
You might be wondering when to use Flexbox instead of Grid and vice versa at this point. If you want to create a single dimension layout, the simplest solution is to use flexbox. These could be things like headers, footers, lists, or to simply arrange multiple items inline. Alternatively, use grid if you want to create complex, grid-like layouts where you have complete control over column and row properties and item placement.
CSS properties
ArcGIS Online supports inline CSS. CSS properties are therefore included in an HTML tag’s style attribute. The CSS properties listed below list a list of options for modifying the appearance of your flexbox and grid layouts.
- Align-items
- Align-self
- Gap
- Grid
- Grid-area
- Grid-auto-columns
- Grid-auto-flow
- Grid-auto-rows
- Grid-column
- Grid-column-end
- Grid-column-start
- Grid-row
- Grid-row-end
- Grid-row-start
- Grid-template
- Grid-template-areas
- Grid-template-columns
- Grid-template-rows
- Justify-content
- Justify-items
- Justify-self
- Margin
- Padding
Practical examples
With all the CSS concepts covered, your mind is likely racing. The best way to apply concepts to real-world examples is to ground them. This section describes a variety of ways that flexbox and grid can be employed to enhance or create pop-ups.  ,
The existing pop-up created for the <a href="https://www.arcgis.com/home/item.html?id=8dcf5d4e124f480fa8c529fbe25ba04e&sublayer=0″>OpenAQ Recent Conditions in Air Quality PM2.5 layer is expanded upon by the flexbox examples. The grid examples are two-fold. The first examples are simple grid layouts that can be saved as pop-ups. The second utilizes the data-rich <a href="https://www.arcgis.com/home/item.html?id=99e3e9ccfaec422db6d4266569aa19d7&sublayer=0″>iNaturalist Observations layer to build a dynamic, informative, and visually appealing pop-up. Check out the <a href="https://jsapi.maps.arcgis.com/apps/mapviewer/index.html?webmap=9a1f758f02c24ee1928ac71d97a9d406″>grid example map and the <a href="https://jsapi.maps.arcgis.com/apps/mapviewer/index.html?webmap=b558bcb7197644e0b982b8cddcea7277″>flexbox example map for more information and to access the code.
Example 1: Create a footer with flexbox
This example demonstrates how straightforward it is to add a dynamic footer to existing pop-ups. The footer keeps the focus on the main content while providing important site and source information.
Example 2: Create a gauge with flexbox
In this example, an air quality gauge is built using flexbox. The gauge reinforces the layer style and the other pop-up content.
Example 3: Reuseable grid layouts
The pop-up displays a variety of grid layouts in the following images. To help you visualize your content within the layout, each grid was created in a general manner. The code is also general, to streamline adding it to your maps.
Example 4: Create a grid layout for iNaturalist observations
The final example combines , all the grid concepts to build a rich grid layout. This layout exemplifies how you can mix and match different content, like text, tables, images, and links, to build a great pop-up.
You might have noticed that some examples use arcade content elements as opposed to plain text. Arcade content elements allow you to logical evaluations, calculate values, format data, and pass those values into your return. This is all done within a single expression. Simpler to create and maintain complex pop-ups are the authoring and content elements. For more information on Arcade content elements, check out Paul’s blog.
Final thoughts
I sincerely hope you find inspiration in creating truly fantastic pop-ups using flexbox and grid layouts to take your maps to the next level. You can be sure that your pop-ups will shine wherever they are viewed thanks to the dynamic functionality of flexbox and grid. You can anticipate HTML templates in upcoming ArcGIS Online updates that will simplify authoring pop-ups with flexbox and grid.  ,