# Layouts in Creght | Creght Visual Documentation

> When you select a container, you’ll see the Auto Layout panel in the settings sidebar. Auto Layout controls how child elements are arranged inside the container…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/en/help.md)

[Changelog](/en/blogs.md)

[AI](/en/docs/ai/quick-create-first-website.md) [Visual](/en/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/en/docs/get-start.md)
- [How to Register for Creght](/en/docs/signup.md)
- [Creating a Project in Creght](/en/docs/create-site.md)
- [Templates](/en/docs/tpls.md)

Design

- [Using the Editor](/en/docs/editor.md)
- [Basic Operations](/en/docs/operating.md)
- [Layouts in Creght](/en/docs/layout.md)
- [Position in Creght](/en/docs/position.md)
- [Size in Creght](/en/docs/size.md)
- [Breakpoints in Creght](/en/docs/breakpoint.md)
- [Overlays](/en/docs/popover.md)
- [Components in Creght](/en/docs/components.md)
- [Adding Third-Party Fonts](/en/docs/tp-font.md)
- [Duplicate and Deep Copy](/en/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/en/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/en/docs/wxmp.md)

Site Setting

- [Page Settings](/en/docs/page-setting.md)
- [How to Upgrade a Plan](/en/docs/manage-plan.md)
- [SEO Settings](/en/docs/seo-setting.md)
- [Small Files (Site Verification)](/en/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/en/docs/custom-domain.md)
- [How to Complete ICP Filing](/en/docs/beian.md)
- [Server Nodes](/en/docs/website-node.md)
- [How to Switch Sites](/en/docs/pxrp79jqtnyq.md)
- [Localization](/en/docs/localization.md)

AI

- [About Creght AI](/en/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/en/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/en/docs/figma-autolayout.md)
- [Covert Figma to live website](/en/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/en/docs/figma03.md)
- [Compressing Video with FFmpeg](/en/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/en/docs/clarity.md)
- [Creating a Button Hover Effect](/en/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/en/docs/collapse.md)
- [Responsive Navigation Tutorial](/en/docs/nav.md)

Design/

# Layouts in Creght

When you select a container, you’ll see the **Auto Layout** panel in the settings sidebar. Auto Layout controls how child elements are arranged inside the container.

By default, a container does not have Auto Layout enabled—this is called **Free Layout**. In Free Layout, child elements can be dragged to any position:

_![image.png](https://fsb.huglight.cn/b9960284f0e8ff498d80d66b9f04a72b/image.png)_

Free Layout is rarely used in web design because it’s not responsive. It’s typically applied only in small, local areas (e.g., inside a complex icon).

## What is Responsive Design?

Responsive Web Design is an approach that allows websites to adapt to different devices and screen sizes. It ensures a consistent user experience and makes content easy to read and use across all devices.

In modern web design, **Auto Layout** (similar to CSS **flexible flow layouts**) is used more often. In this mode, child elements are automatically arranged from left to right or top to bottom, making it the foundation of responsive design.

_![image.png](https://fsb.huglight.cn/b4f68dda627094980db44ca9847c751c/image.png)_

When you enable Auto Layout, several options appear. Let’s go through them in detail.

## Flex Layout

Auto Layout has two types: **Flex Layout** and **Grid Layout**.

We’ll start with Flex Layout, which is the most commonly used.

Flex Layout makes it easy to control the size of child elements. For example, in a two-column layout where the left side is fixed at 120px and the right side expands to fill the remaining space, Flex Layout is ideal:

_![image.png](https://fsb.huglight.cn/27e264e8466ebae2cc4efca7769f01cb/image.png)_

### Flex Layout Options

- **Direction**
  - Horizontal
  - Vertical

    ![image.png](https://fsb.huglight.cn/a87d9e04c3d8ad7b76253e0e98008ada/image.png)
- **Distribute**

Controls alignment along the **main axis**.


> The main axis is defined by the layout direction:
>
> - Horizontal layout → main axis is X
> - Vertical layout → main axis is Y


Example below shows horizontal layout:

_![image.png](https://fsb.huglight.cn/1d165a070cabe1477a77dd9dba4fab61/image.png)_

- **Align**

Controls alignment along the **cross axis** (perpendicular to the main axis).


> For horizontal layout → cross axis is Y
>
> For vertical layout → cross axis is X


Example (horizontal layout, controlling Y-axis alignment):

_![image.png](https://fsb.huglight.cn/511fdcf1d7863df56472b8a359c0f8bf/image.png)_

- **Gap**

Sets spacing between child elements.

_![image.png](https://fsb.huglight.cn/a98edb1fe8d1835e7cd3096a761764bf/image.png)_
- **Wrap**

Controls whether elements automatically wrap to a new line when they exceed the parent container’s width.

_![image.png](https://fsb.huglight.cn/424bd6fe3aebeb9a8364977815f134fa/image.png)_

📚 More reference: _Learn CSS Flexbox with Animations_

## Grid Layout

Grid Layout is used for more complex, non-linear designs.

_![image.png](https://fsb.huglight.cn/9dd8293617f1f95df26297f3bfc26969/image.png)_

### Grid Layout Options

- **Columns**: Number of columns
- **Rows**: Number of rows
- **Gap**: Spacing between grid cells

## Advanced Layout

Advanced settings are used for more specialized scenarios and are not commonly needed. Here’s a quick overview:

_![image.png](https://fsb.huglight.cn/97c55488132ff68a27dc0fb0f090f22a/image.png)_

- **Columns (auto):** Often used when child elements have fixed widths, and the parent container width adjusts automatically.
- **Width**
  - **Min:** Minimum grid width (e.g., 50px)
  - **Fixed:** Fixed width
- **Height**
  - **Fill container:** Fills the parent container height
  - **Fixed:** Fixed height
  - **Fit content:** Adjusts height to content
- **Align:** Horizontal alignment of child elements inside the grid (left, center, right).

Example: In a 6-column grid with only 3 items, alignment controls their horizontal position.

_![image.png](https://fsb.huglight.cn/2597a3a1c99758075a0a0d8797e7835c/image.png)_
- **AutoFlow:** Controls the order in which child elements are placed inside the grid.

_![image.png](https://fsb.huglight.cn/0987693308d6b3ea1502678b009a24ae/image.png)_

## Grid Item: Span

When selecting a grid item, you’ll see special sizing options called **Span**. This controls how many rows or columns the item stretches across.

_![image.png](https://fsb.huglight.cn/1079b83fd5d9ed066203a073c178083c/image.png)_

On this page

- [What is Responsive Design?](#what-is-responsive-design)
- [Flex Layout](#flex-layout)
- [Flex Layout Options](#flex-layout-options)
- [Grid Layout](#grid-layout)
- [Grid Layout Options](#grid-layout-options)
- [Advanced Layout](#advanced-layout)
- [Grid Item: Span](#grid-item-span)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)