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 of your repo - Submit github repositories

Repository Structure:

index.html (Main Navigation Page):

products.html (Product List):

about.html (About Us Page):

style.css (CSS Styling):

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