# 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://content.gitbook.com/content/h6eC4pApOLA0inzPl7Cw/blobs/jh9fOIjc98LPCdU0OBcR/image%20(36).png" alt=""><figcaption></figcaption></figure>

**Desktop grid layout:**

1366 x 768 - 12 columns with 14px gutter space

<figure><img src="https://content.gitbook.com/content/h6eC4pApOLA0inzPl7Cw/blobs/q7Tspb45tAStTpf6xjGg/image%20(37).png" 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://content.gitbook.com/content/h6eC4pApOLA0inzPl7Cw/blobs/Qem4YI0QAkKHRpXoYe02/image%20(40).png" 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://content.gitbook.com/content/h6eC4pApOLA0inzPl7Cw/blobs/yoL6bNNSw0hMSoNm914L/image%20(38).png" alt=""><figcaption></figcaption></figure>