# Grid & Layout

At the heart of the Sunbird-Ed portal's design is a robust grid system and layout framework. These foundational elements play a pivotal role in organizing content and creating responsive designs that adapt seamlessly to various screen sizes and devices. For more information please refer to this link <https://sunbird-ed.github.io/sunbird-style-guide/dist/#/gridlayout>

**Key Features:**

* **Versatile Grid System:** Flexible layout options for diverse content arrangements.
* **Consistent Design:** Standardized framework for a unified visual identity.
* **Responsive Design:** Dynamic content adaptation for all screen sizes.
* **Efficient Development:** Streamlined workflow within a structured framework.

**Grid Options:** See how aspects of the grid system work across multiple devices with a handy table.

<figure><img src="/files/xvE7nKTLfCStLgAtrhs4" alt=""><figcaption></figcaption></figure>

**Desktop grid layout:**

1366 x 768 - 12 columns with 14px gutter space

<figure><img src="/files/Ty5GGdxUrDLqLxfHcGsB" alt=""><figcaption></figcaption></figure>

**8 Point Grid System:**

Our portal employs an efficient 8-point grid system for layout and spacing. This systematic approach ensures consistent and harmonious content placement, contributing to a polished and user-friendly design.

**Reasons for the 8-Point Grid System:**

The variety of screen sizes and pixel densities has continued to increase making the work of asset generation more complicated for designers. Utilizing an even number like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent. Smaller components, such as iconography and typography, can align to a 4dp grid.

<figure><img src="/files/rHV4GULDNOn8FyUxKYWX" alt=""><figcaption></figcaption></figure>

1. **Consistency:** The 8-point grid system provides a standardized and consistent framework for layout and spacing, ensuring a uniform visual identity across the portal.
2. **Efficiency:** It simplifies the design and development process by offering predefined increments, making it easier to align elements and create balanced compositions.
3. **Responsive Design:** The 8-point grid system is well-suited for responsive design, allowing content to adapt gracefully to various screen sizes and resolutions.
4. **Accessibility:** By adhering to consistent spacing, the portal enhances accessibility and readability, improving the overall user experience.
5. **Maintenance:** The system simplifies design maintenance and updates, as adjustments can be made systematically, minimizing the risk of design inconsistencies.

In summary, the 8-point grid system is chosen for its ability to maintain design consistency, streamline development, support responsiveness, and enhance user accessibility within the Sunbird-Ed portal.

<figure><img src="/files/eWVXPJ1WBcFoKazvmViZ" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ed.sunbird.org/older-versions/contribute/source-code/workflows/ui-user-interface-sunbird-ed-portal/component-style-guide-version-1/grid-and-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.