Web Development

😁60👍6🔥3🤔3

14.2K views03:57

21 Days Web Development Project Plan

Day 13: CSS Grid

1. Understand CSS Grid: CSS Grid is a powerful layout system for creating complex web layouts. Review the main concepts like grid containers, grid items, and properties such as grid-template-columns, grid-template-rows, gap, grid-area, and justify-items.

2. Create a New HTML File: Open your text editor and create a new file named css_grid_layout.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Build the Grid Layout: Inside the <body> tag, create a container div with several child divs to represent the grid items. For this example, let's create a simple website layout with a header, sidebar, main content area, and footer.

   <!DOCTYPE html>
   <html>
   <head>
       <title>CSS Grid Layout</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="grid-container">
           <header class="header">Header</header>
           <aside class="sidebar">Sidebar</aside>
           <main class="main-content">Main Content</main>
           <footer class="footer">Footer</footer>
       </div>
   </body>
   </html>

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add basic styles for your grid layout.

   body {
       font-family: Arial, sans-serif;
       background-color: #f8f8f8;
       color: #333;
       margin: 0;
       padding: 0;
   }

   .grid-container {
       display: grid;
       grid-template-columns: 200px 1fr;
       grid-template-rows: auto 1fr auto;
       gap: 10px;
       height: 100vh;
   }

   .header {
       grid-column: 1 / -1;
       background-color: #333;
       color: white;
       padding: 20px;
       text-align: center;
   }

   .sidebar {
       background-color: #4CAF50;
       color: white;
       padding: 20px;
   }

   .main-content {
       background-color: #fff;
       padding: 20px;
   }

   .footer {
       grid-column: 1 / -1;
       background-color: #333;
       color: white;
       padding: 20px;
       text-align: center;
   }

6. Define the Grid Layout: Use CSS Grid properties to define the layout of the grid container and its items. Notice the use of grid-template-columns, grid-template-rows, and gap.

7. Save and View: Save your css_grid_layout.html and styles.css files. Open the HTML file in a web browser to see how the layout looks. Adjust the layout or styling as needed.

8. Explore Additional CSS Grid Features: Experiment with more CSS Grid properties and values to create various layouts. Try properties like grid-template-areas, grid-column, grid-row, and align-items.

   .grid-container {
       display: grid;
       grid-template-columns: 200px 1fr;
       grid-template-rows: auto 1fr auto;
       grid-template-areas:
           "header header"
           "sidebar main-content"
           "footer footer";
       gap: 10px;
       height: 100vh;
   }

   .header {
       grid-area: header;
   }

   .sidebar {
       grid-area: sidebar;
   }

   .main-content {
       grid-area: main-content;
   }

   .footer {
       grid-area: footer;
   }

9. Resources:
- [CSS Tricks - https://css-tricks.com/snippets/css/complete-guide-grid/)
- [CSS Grid: https://t.iss.one/javascript_courses/182]

10. Publish Your CSS Grid Layout: Once you're satisfied with your CSS Grid layout, upload your HTML and CSS files to your hosting service to share them online.

Web Development Best Resources: https://topmate.io/coding/930165

Share with credits: https://t.iss.one/webdevcoursefree

ENJOY LEARNING 👍👍

👍31❤12

15.3K viewsedited 06:31