# Create a list
The [**List**](https://docs.acho.io/app-builder/app-construction/elements/layout-elements/list) element is another valuable tool for presenting elements that follow a common pattern. It is to turn data into a more flexible format instead of a tabular format. Compared to [**Table**](https://docs.acho.io/app-builder/app-construction/elements/table-and-chart/table), **Lists** offer the advantage of creating a more dynamic user interface through CSS techniques such as Flex and Grid. The list element digests an JSON array and convert the array to a list of elements with the same pattern.
## Prepare your data
In this tutorial, we will use a sample Shopify products dataset to build the list, you can download the data [here](https://storage.googleapis.com/acho-prod-assets/acho-website-assets/live_demo/sample_products.csv) and [add it to resource](https://docs.acho.io/acho-studio/resources/add-a-resource).
## Create an app
[Create an app](https://docs.acho.io/get-started#3.-create-a-blank-app-or-build-with-a-template.) if you don't have one, or go to the app that you want to add a table
### Drag list element onto page
To add a text to your page, find **Elements -> List** and drag it onto the page.
### Add elements into list
Make sure the list is on editing mode, then drag a **Text** element into the list and type `${$item.product_name}` . `${}` tells the system that you are using an [accessor](https://docs.acho.io/app-builder/app-construction/accessors) to access data. `$item.product_name` means to extract the value of the `product_name` key in each JSON object.
Similarly, add another text and an image into the list, use `${$item.image_url}` as the image url and `${$item.stock}` for the text. Use container to control the layout
Click the **Preview** button to see the result. As you can see, all the values in your data are shown on the page.
### Use CSS to control list layout
Select the list element and try setting the layout to either "Display: `Flex`" with a direction of "`Row`," or "Display: `Grid`" with columns set to "`1fr 1fr 1fr`"
