# 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://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2Fgit-blob-0781ca366a500249e48535372035bd32fde9487f%2Fimage%20(36).png?alt=media" alt=""><figcaption></figcaption></figure>

**Desktop grid layout:**

1366 x 768 - 12 columns with 14px gutter space

<figure><img src="https://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2Fgit-blob-2617a34391465cd9e3a182dfd6c0896cbfc20e5f%2Fimage%20(37).png?alt=media" 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://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2Fgit-blob-17fc8c8acc65e58787f1632eddb9d52767d7bc95%2Fimage%20(40).png?alt=media" 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://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2Fgit-blob-64afa993d5b3c344b3b10408dc48510b3cde3406%2Fimage%20(38).png?alt=media" alt=""><figcaption></figcaption></figure>