Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Project CSS E1 Grid


Creating a Grid , Basic Grid , Creating Columns , Creating Rows , Grid Template , Fraction , Repeat , minmax , Grid Gap , Grid Items , Multiple Row Items , Grid Row , Grid Column , Grid Area

Project Title: Website Skeleton

  1. Create a html file with your name like john.html
  2. Add current code to that file:
<!DOCTYPE html>
  /* your css code here */
    <!-- your html code here -->
  1. Set all divs style to border-radius 10px and padding 10px

  2. Create a div and set class to container. Set display to grid.

  3. Add 4 divs inside container with following classes:

  • header: It wraps all width and background-color is gary. Content is Header.
  • sidebar: It is under header and covers 25% of width of the screen. background-color is yellow. Content is Sidebar
  • main: It is under header and next to sidebar and covers 75% of width of the screen. background-color is green. Content is Main
  • footer: It wraps all width. background-color is blue. Content is Footer
  1. Create 10px gap between sections.

Want to get reviewed?

Send Pull Request. Check how to deliver your code:

Need help?

Download Free eBook

You can’t perform that action at this time.