> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Feature Grid

> The main features of the Feature Grid block.

The Feature Grid block displays a collection of items in a grid layout. As the name suggests, it is meant to be used for listing product features, however, it can be also used for displaying any sort of lists (in some cases, the [List block](/building-blocks/vikC2AWEpQGkZd4jGyoVxo/list-block/pQhPYuA28VXr5tLLFBcbCU) may be more relevant depending on your use case). Let’s explore the block setting to see how it’s configured.

## Header

In the **Header** section of block settings, you can customize the **Title** and **Subtitle** as well as add a background image for the whole block.

<Frame caption="Feature Grid’s Header section">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image1.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=870c5c835cbbeb90d23249709e2d1e19" alt="Feature Grid’s Header section" width="846" height="954" data-path="building-blocks/images/feature-grid/image1.png" />
</Frame>

## Features

In the Features section, you can customize each feature’s icon/image, title, description, as well as the link. Also, you can add new features, delete existing ones, as well as reorganize those.

<Frame caption="Customizing the Features section">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image2.gif?s=8c23cf3ae8a0a8adba31ecd3e079a924" alt="Customizing the Features section" width="2876" height="1412" data-path="building-blocks/images/feature-grid/image2.gif" />
</Frame>

# Feature Grid Block Layouts

## Layout: **Feature grid with big icons**

<Frame caption="Feature Grid with big icons">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image3.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=8be10dfb1cbdb61d0a7c9bfb7d3a9c65" alt="Feature Grid with big icons" width="2458" height="1388" data-path="building-blocks/images/feature-grid/image3.png" />
</Frame>

This Feature Grid layout features icons to illustrate each feature.

## Layout: Feature grid with four column view

<Frame caption="Feature Grid with four column view">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image4.gif?s=83452efcfd8d98806930044796b16b15" alt="Feature Grid with four column view" width="2876" height="1412" data-path="building-blocks/images/feature-grid/image4.gif" />
</Frame>

This Feature Grid layout is organized into four columns and features an image with overlay, which in turn contains a button.

## Layout: Feature grid with images

<Frame caption="Feature Grid with images">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image5.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=ff09dc0d3864dd72febaef89c1d63a71" alt="Feature Grid with images" width="2272" height="1204" data-path="building-blocks/images/feature-grid/image5.png" />
</Frame>

A Feature Grid layout with images to illustrate each feature.

## Layout: Feature grid with small icons

<Frame caption="Feature Grid with small icons">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image6.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=5133b736856e953dfd1594140c31e3f6" alt="Feature Grid with small icons" width="2344" height="1162" data-path="building-blocks/images/feature-grid/image6.png" />
</Frame>

This Feature Grid layout is similar to Feature Grid with big icons but has smaller icons, which are positioned to the left from the Title and Subtitle.

## Layout: Feature grid with sections

<Frame caption="Feature Grid with sections">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image7.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=7c49b6885c7425fade0594907d2ea04e" alt="Feature Grid with sections" width="2430" height="1286" data-path="building-blocks/images/feature-grid/image7.png" />
</Frame>

This Feature Grid layout is organized into two columns and has bigger areas/sections for each item.

## Layout: Feature grid with three column view

<Frame caption="Feature grid with three column view">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image8.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=d97eb8f7f00ad4f073b54ae3bf3f5347" alt="Feature grid with three column view" width="2406" height="992" data-path="building-blocks/images/feature-grid/image8.png" />
</Frame>

A Feature Grid layout with three columns.

## Layout: Feature grid with box and three column view

<Frame caption="Feature grid with box and three column view">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image9.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=71f4d0e817092aad2ca34558cfeea201" alt="Feature grid with box and three column view" width="2398" height="1302" data-path="building-blocks/images/feature-grid/image9.png" />
</Frame>

A Feature Grid layout with boxed items organized into three columns.

## Layout: Feature grid with steps

<Frame caption="Feature Grid with steps">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature-grid/image10.gif?s=2caa90961247d6dd636652aa5217eb02" alt="Feature Grid with steps" width="2876" height="1412" data-path="building-blocks/images/feature-grid/image10.gif" />
</Frame>

This Feature Grid layout lets you present your items in a “steps” format.
