# 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="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FxNdiJh37pQTJI5KdazXD%2Fimage.png?alt=media&#x26;token=dca1bb4d-746e-45c2-97c0-d299bc5043c0" alt=""><figcaption></figcaption></figure>

**Desktop grid layout:**

1366 x 768 - 12 columns with 14px gutter space

<figure><img src="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FQf5O3axmoNtYbGAxdDg9%2Fimage.png?alt=media&#x26;token=e8b376f2-cfcc-48db-9f24-afdff832641f" 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="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2F91e4UAa9bEFEluQYhcRY%2Fimage.png?alt=media&#x26;token=d629514a-21d5-446a-96f1-52f56b0e466b" 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="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FkgFuOwf11yO7ej1Bqc02%2Fimage.png?alt=media&#x26;token=c977cfd6-0d13-4dd0-9c34-e1242585ee21" alt=""><figcaption></figcaption></figure>