# Activity #27: CSS GRID

Apply it on 5 pages (ex. list of products,list of employees, list of students, etc) - name your repo CSS\_GRID - add documentation on [README.md](http://README.md) of your repo - Submit github repositories

*   
    

**Repository Structure:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845433098/43ec1ffa-c01d-44bf-8da9-d434330b49a1.png align="center")

**index.html (Main Navigation Page):**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845494358/e62dfc95-9d04-45ee-9eee-b37b8ad29b5b.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845541636/d9b4126e-802f-413c-a8fc-bb8bfba6fa41.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845625777/62294530-749b-4687-93d4-dd3cd2eaa333.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845649705/c1249e98-f1fd-416d-b961-d6a5b45fff49.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845684030/ed861bdd-f294-431d-9c3b-e23d3ad02f60.png align="center")

**products.html (Product List):**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845721649/49a00f02-fac1-43eb-84e5-0dfcf29fb426.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845767455/e0319136-e75c-4bdb-979d-8b59045b07e7.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845806224/8b48f21f-fedd-45d0-a1c8-631bdf137f4f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728845828508/90c8e850-656a-4cd7-8cc5-1e920eab8a45.png align="center")

**about.html (About Us Page):**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846100387/e6a9766e-4851-4cf1-b869-9e53eaa9ff86.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846124424/148c8b2c-a837-4e1c-a8c0-d7612c0351ce.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846156825/0754483c-f42d-4909-a9e4-6c00d8f7e2fc.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846180064/40ce91f2-6c19-4b12-8ebb-22aadd8007bd.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846227351/ae0b4fdc-deb1-4312-b5a5-2ddc3e1479b4.png align="center")

**style.css (CSS Styling):**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846258945/767f07a6-79cc-4fea-8e11-5702b0215341.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846295271/f850f611-418e-4188-a1b3-aa9e8530989f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846324156/047dfa9b-4c66-4196-8821-093ca80cd39d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846352110/cb59949c-85ac-4373-8972-bc05a4535e19.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846385157/ae78a15a-12a9-44e0-b0e6-9eef828f904c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728846435626/b9ea3d60-56c0-40cf-9222-9d48f5fb9fc9.png align="center")

**Explanation:**

1. **HTML Structure:**
    
    * Each HTML file has a basic structure with a header, navigation, main content area, and footer.
        
    * The navigation links connect the pages.
        
    * Placeholders are used for images, product details, employee information, and student data.
        
2. **CSS Styling:**
    
    * The `style.css` file provides basic styling for the layout.
        
    * The `main` section has a `padding` to create some space around the content.
        
    * The `footer` is styled with a dark background and fixed positioning to ensure it stays at the bottom.
        
3. **CSS Grid Layout:**
    
    * The `products`, `employees`, and `students` sections use CSS Grid for layout.
        
    * `display: grid` enables Grid layout.
        
    * `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` creates responsive columns that adapt to the screen size. The columns will fit as many items as possible, with a minimum width of 250px.
        
    * `grid-gap: 20px` adds spacing between grid items.
        

**To Use:**

1. **Create the Repository:** Create a new folder named "CSS\_GRID".
    
2. **Create Files:** Create the HTML files (index.html, products.html, employees.html, students.html, about.html) and the CSS file (style.css) in the folder.
    
3. **Add Content:** Replace the placeholders with your actual content.
    
4. **Add Images:** Add appropriate image files for the products, employees, and students.
    
5. **Open in Browser:** Open `index.html` in your web browser to view the pages.
    

Remember:

**Placeholders:** Replace the placeholder text and images with your actual content.

**Customization:** You can customize the CSS styles to match your design preferences.

**Responsiveness:** The `auto-fit` and `minmax()` functions ensure that the layout adapts to different screen sizes.

GITHUB LINK: [https://github.com/MaricarRico/Activity-27-CSS\_GRID.git](https://github.com/MaricarRico/Activity-27-CSS_GRID.git)