CSS and Grid Layout

CSS background-color:

The background-color property specifies the background color of an element.

        body {
            background-color: lightblue;
        }
            

CSS background-image:

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

        body {
            background-image: url("paper.gif");
        }
            

CSS background-repeat:

By default, the background-image property repeats an image both horizontally and vertically.

Some images need to be repeated only horizontally or vertically, we can use background-repeat: repeat-x; or background-repeat: repeat-y;

Showing the background image only once is also specified by the background-repeat property:

        background-repeat: no-repeat;
            

Grid Layout:

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Display Property:

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

        .grid-container {
            display: grid;
        }
            

Grid Gaps:

The spaces between each column/row are called gaps. You can adjust the gap size by using one of the following properties:

• column-gap - The column-gap property sets the gap between the columns.
• row-gap - The row-gap property sets the gap between the rows.
• gap - The gap property is a shorthand property for the row-gap and the column-gap properties.

The grid-template-columns Property:

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated list, where each value defines the width of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
        }
            

The grid-template-columns property can also be used to specify the size (width) of the columns.

        .grid-container {
            display: grid;
            grid-template-columns: 80px 200px auto 40px;
        }
            

The justify-content Property:

The justify-content property is used to align the whole grid inside the container.

        .grid-container {
            display: grid;
            justify-content: space-evenly;
        }
            

We can use other values like space-around, space-between, center, start, end.

The align-content Property:

The align-content property is used to vertically align the whole grid inside the container.

        .grid-container {
            display: grid;
            align-content: center;
        }
            

We can use other values like space-around, space-between, space-evenly, start, end.

Navigation Bars

Having easy-to-use navigation is important for any website. With CSS, you can transform boring HTML menus into good-looking navigation bars. A navigation bar needs standard HTML as a base. We can build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the ul and li elements makes perfect sense.

CSS:

        <ul>
          <li><a href="default.asp">Home</a></li>
          <li><a href="news.asp">News</a></li>
          <li><a href="contact.asp">Contact</a></li>
          <li><a href="about.asp">About</a></li>
        </ul>
        
        ul {
          list-style-type: none;
          background-color: grey;
          text-align: right;
        }
        
        li {
          display: inline-block;
          padding: 15px;
        }
        
        li a {
          text-decoration: none;
        }