---
updatedAt: 2025-05-14T08:08:21.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Introducing Layout Blocks

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

# Presenting layout blocks

## Introduction

In previous courses, we saw how to use basic blocks of the Store Framework that bring functionality, but in general, are very simple to be used in a real store layout.

The least we need when building a *template* is to define a *grid*, that is, to be able to arrange blocks next to each other, but there are still many other more complex *layouts* that in general need to be achieved: tabs, modes, stacked, etc.

In this course, we will learn how it is possible to use some of the *layout* blocks and better understand each of the peculiarities.

## Pattern between *layouts*

Although each *layout* block has its functionality, the idea behind them is very similar. They all depend heavily on the concept of `children`, that is, to receive child blocks and define the rendering rule. It is also common for *layout* blocks to present some formatting rules but that always culminates in using any child block, thus ensuring flexibility in reaching the desired template.

```json
{
  "layout-block": {
    "children": ["anything"]
  }
}
```

*Example of the idea of ​​all layout blocks*

## Activity

For the course to work well, we need to add the *apps* dependencies of *layout* that we will need.

1. Go to your theme's `manifest.json` and check the following dependencies:

```diff
{
  ...
  "dependencies": {
    ...
+   "vtex.condition-layout": "1.x",
+   "vtex.store-link": "0.x",
+   "vtex.modal-layout": "0.x",
+   "vtex.product-price": "1.x",
+   "vtex.stack-layout": "0.x",
+   "vtex.tab-layout": "0.x",
+   "vtex.responsive-layout": "0.x",
+   "vtex.slider-layout": "0.x",
  }
}
```

### Any questions?

See the [answersheet for this step](https://learn.vtex.com/docs/course-layout-blocks-step01introducing-layout-answersheet-lang-en) or check our \[office hours] on the VTEX Developers channel(<https://www.youtube.com/c/VTEXDevelopers>)

<hr/>
<div id="contribute-container">
  <p id="contribute-title"> 
    Help us make this content better!
  </p>
  <p id="contribute-description">
    VTEX IO courses are open source. If you see something wrong, you can open a pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/layout-blocks/steps/01_introducing-layout/en.md">
    Make a contribution
  </a>

  <p id="contribute-issue">
    or <a href="https://github.com/vtex/vtex-courses/issues/new/choose">open an issue</a>
  </p>

</div>