CSS Grid Container Properties

Creating a Grid Container:

  • To start using CSS Grid, you need to define a grid container. This is done by applying the display: grid; property to an element. For example:


    <head>
        <style>
            .container {
                display: grid;
            }

            .grid-item1 {
                background-color: rgb(189, 113, 113);
            }

            .grid-item2 {
                background-color: rgb(60, 221, 221);
            }

            .grid-item3 {
                background-color: rgb(216, 218, 119);
            }

            .grid-item4 {
                background-color: rgb(140, 87, 184);
            }

            .grid-item5 {
                background-color: rgb(189, 91, 151);
            }

            .grid-item6 {
                background-color: rgb(120, 180, 81);
            }

            .grid-item7 {
                background-color: rgb(126, 46, 46);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="grid-item1">item1</div>
            <div class="grid-item2">item2</div>
            <div class="grid-item3">item3</div>
            <div class="grid-item4">item4</div>
            <div class="grid-item5">item5</div>
            <div class="grid-item6">item4</div>
            <div class="grid-item7">item5</div>
        </div>
    </body>

Defining Rows and Columns:

  • After creating a grid container, you can specify the number and size of rows and columns in the grid. There are multiple ways to achieve this:
  • Using the grid-template-rows and grid-template-columns properties:

    .container {
        display: grid;
        grid-template-rows: 100px 200px;
        /* Two rows, first row is 100px tall, second row is 200px tall */
        grid-template-columns: 1fr 2fr;
        /* Two columns, first column takes 1 fraction of available space, second column takes 2 fractions */
    }

  • Using the grid-template property to define both rows and columns in one line:

    .container {
        display: grid;
        grid-template: 100px 200px / 1fr 2fr;
    }


    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px 150px 200px);
    }


    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr 2fr);
        grid-template-rows: repeat(3, 100px 150px 200px);
    }

Defining Rows and Columns Gap:

    • The row-gap and column-gap properties in CSS Grid allow you to specify the size of the gaps or spacing between rows and columns within a grid.

        .container {
            display: grid;
            grid-template-columns: 200px 200px auto;
            grid-template-rows: 150px 150px 200px;
            row-gap: 10px;
            column-gap: 20px;
        }

    • You can also use the shorthand gap property to set both row-gap and column-gap simultaneously. For example:

        .container {
            display: grid;
            grid-template-columns: 200px 200px auto;
            grid-template-rows: 150px 150px 200px;
            gap: 10px 20px;
            /* Sets a horizontal gap of 10 pixels and a vertical gap of 20 pixels */
        }

    Horizontally Alignments Grid Content:

    • In the context of a CSS Grid container, the `justify-content` property is used to align the grid items along the horizontal axis (main axis) within the grid container. It controls the distribution and positioning of grid items within the grid container along the row axis.
    • The `justify-content` property accepts various values that determine how the grid items are aligned horizontally.
    • Here are some commonly used values:
    • start (default): Grid items are packed towards the start of the row axis. This means they align to the left edge for LTR (left-to-right) languages.
    • end: Grid items are packed towards the end of the row axis. This means they align to the right edge.
    • center: Grid items are centered horizontally within the grid container.
    • space-between: Grid items are evenly distributed along the row axis, with the first item aligned to the start edge and the last item aligned to the end edge. The remaining space is distributed equally between the items.
    • space-around: Grid items are evenly distributed along the row axis with equal space around them. This means that there is space both before the first item and after the last item, and the remaining space is distributed equally between the items.
    • space-evenly: Grid items are evenly distributed along the row axis with equal space around them, including before the first item and after the last item.

        .container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 150px 150px;
            grid-auto-rows: 200px;
            width: 100vw;
            justify-content: space-evenly;
        }


    • By using `justify-content`, you can control the horizontal alignment and distribution of grid items within the CSS Grid container, helping you achieve the desired layout and spacing in your grid-based designs.

    Vertically Alignments Grid Content:

    • In the context of a CSS Grid container, the `align-content` property is used to align and distribute the grid tracks (rows) along the vertical axis (cross axis) when there is extra space within the grid container. It affects the overall positioning of the entire grid within the container.
    • The `align-content` property accepts various values that determine how the grid tracks are aligned vertically and how the space is distributed.
    • Here are some commonly used values:
    • start: Aligns the grid tracks to the start of the container along the cross axis.
    • end: Aligns the grid tracks to the end of the container along the cross axis.
    • center: Centers the grid tracks vertically within the container along the cross axis.
    • space-between: Distributes the extra space evenly between the grid tracks, with no space at the start and end of the container.
    • space-around: Distributes the extra space evenly between the grid tracks, including space at the start and end of the container.
    • space-evenly: Distributes the extra space evenly between the grid tracks, including space at the start, end, and between each track.


        .container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 150px 150px;
            grid-auto-rows: 200px;
            width: 100vw;
            height: 100vh;
            align-content: center;
        }

    • In the above example, the grid tracks within the grid container are aligned vertically at the center along the cross axis. The `align-content: center;` rule centers the entire grid within the available space of the grid container.
    • It's important to note that the `align-content` property affects the alignment and distribution of the grid tracks, not the alignment of individual grid items within their respective tracks. To control the alignment of grid items within tracks, you can use the `align-items` property.
    • By using `align-content`, you can control the vertical alignment and distribution of the grid tracks within the CSS Grid container, helping you achieve the desired layout and spacing in your grid-based designs, especially when there is extra space available.

      Horizontally Alignments Grid Items:

      • In the context of a CSS Grid container, the `justify-items` property is used to align grid items along the horizontal axis (main axis) within their individual grid cells. It controls the positioning of grid items horizontally within their respective cells.
      • The `justify-items` property accepts various values that determine how the grid items are aligned horizontally. Here are some commonly used values:
      • start (default): Grid items are aligned to the start of their grid cells along the horizontal axis. This means they align to the left edge.
      • end: Grid items are aligned to the end of their grid cells along the horizontal axis. This means they align to the right edge.
      • center: Grid items are centered horizontally within their grid cells.

          .container {
              display: grid;
              grid-template-columns: 200px 200px 200px;
              grid-template-rows: 150px 150px;
              grid-auto-rows: 200px;
              border: 2px solid red;
              justify-items: center;
          }

      • In the above example, the grid items within the grid container are aligned horizontally at the center of their respective grid cells. The `justify-items: center;` rule centers the grid items within their cells along the horizontal axis.
      • It's important to note that the `justify-items` property affects the alignment of grid items within their individual grid cells, not the overall alignment of the grid tracks or the entire grid container. To control the overall alignment of the grid within the container, you can use the `justify-content` property.
      • By using `justify-items`, you can control the horizontal alignment of grid items within their grid cells within the CSS Grid container, helping you achieve the desired positioning and layout for each individual grid item.

          Vertically Alignments Grid Items:

            • In the context of a CSS Grid container, the `align-items` property is used to align the grid items along the vertical axis (cross axis) within the grid container. It controls the distribution and positioning of grid items within the grid container along the column axis.
            • The `align-items` property accepts various values that determine how the grid items are aligned vertically. Here are some commonly used values:
            • start: Grid items are aligned to the start of the column axis. This means they align to the top edge of the grid container.
            • end: Grid items are aligned to the end of the column axis. This means they align to the bottom edge of the grid container.
            • center: Grid items are centered vertically within the grid container.

                .container {
                    display: grid;
                    grid-template-columns: 200px 200px 200px;
                    grid-template-rows: 150px 150px;
                    grid-auto-rows: 200px;
                    align-items: center;
                }

            • In the above example, the grid items within the grid container are aligned vertically at the center of the column axis. The `align-items: center;` rule centers the grid items within the available space of the grid container.
            • It's important to note that the `align-items` property affects the alignment of grid items within their respective grid cells along the column axis. If the grid items span multiple rows or have varying heights, you might also need to consider the `align-self` property to further control their individual alignment within the cell.
            • By using `align-items`, you can control the vertical alignment and distribution of grid items within the CSS Grid container, helping you achieve the desired layout and spacing in your grid-based designs.
            grid-auto-flow CSS Property:

            • The CSS property grid-auto-flow controls the placement and positioning of grid items in a grid container when there are more items than can fit in the explicitly defined grid tracks.
            • By default, when grid items cannot fit into the explicitly defined grid tracks, they will overflow or wrap to the next available track. However, grid-auto-flow allows you to specify how these overflowing or additional items should be placed within the grid container.
            • The grid-auto-flow property accepts two values:
            • row (default): This value places the grid items in rows, filling up the tracks in each row before moving on to the next row. In this case, new items will be placed below the previously positioned items.


                .container {
                  display: grid;
                  grid-auto-flow: row;
                }

            • column: This value places the grid items in columns, filling up the tracks in each column before moving on to the next column. New items will be placed to the right of previously positioned items.


                .container {
                  display: grid;
                  grid-auto-flow: column;
                }

            grid-auto-rows CSS Property:

            • The CSS property grid-auto-rows is used to specify the size of implicitly created rows in a grid container. It determines the height of rows that are not explicitly defined using grid-template-rows.


                .container {
                  display: grid;
                  grid-auto-flow: row;
                  grid-template-rows: 200px 150px;
                  grid-auto-rows: 100px;
                }

              grid-auto-columns CSS Property:

              • The CSS property grid-auto-columns is used to specify the size of implicitly created columns in a grid container. It determines the width of columns that are not explicitly defined using grid-template-columns.


                  .container {
                    display: grid;
                    grid-auto-flow: column;
                    grid-template-columns: 200px 150px;
                    grid-auto-columns: 100px;
                  }



              s

              s

              s

              s

              By

              No comments:

              Post a Comment

              Subscribe to: Post Comments (Atom)

              Primitive Types in TypeScript

              In TypeScript, primitive types are the most basic data types, and they are the building blocks for handling data. They correspond to simple ...

              • Introduction to JavaScript
                JavaScript is a popular high-level programming language that is primarily used to add interactivity to web pages. It is a scripting language...
              • Prerequisites for Javascript
                Before learning JavaScript, there are some fundamental concepts and skills that you should be familiar with. Here are some prerequisites for...
              • useEffect() Hook in React JS
                The useEffect() hook is a built-in hook in React that allows functional components to perform side effects. Side effects are operations that...