source.by

Programming language: CSS GRID

The basics of CSS Grid

The CSS Grid layout allows Web creators to more efficiently design responsive web designs across multiple browsers. The CSS Grid layout allows you to divide a website into columns and rows of any size. Many websites are preparing to use the CSS Grid layout, or already utilize the layout. CSS Grid is supported in all main browsers and their Mobil versions: Firefox, Safari, Edge, and Internet Explorer. Internet Explorer only supports the CSS Grid layout in the latest version of internet explorer, IE 10 and IE 11. In addition to needing the most up to date version of IE, IE also requires you to use the old CSS Grid syntax.

How The CSS Grid layout works

Here is a listing of some of the basics of how the CSS Grid layout works.

Defining a Grid

The first step of setting up a CSS Grid layout is to start with a one-liner. To make an HTML element into a grid container you need to add the property grid or grid-inline. When you add the grid container to the display it should look like this: display: grid or display: inline-grid if you want to use an inline grid container.

Creating column and rows

To create the columns and rows within a grid container you use the properties (grid-template-columns) and (grid-template-rows). The property (grid-template-columns) will create the placement of your columns. The property (grid-template-rows) will create the placement of rows.

Adding length to properties

To create the length of your columns and rows you will need to add the length at the end of the property (grid-template-columns: 200px 200px 200px) or (grid-template-rows 100px 100px 100px).

Determining the number of columns and rows

Deleting one of the properties will delete one of the rows or columns. For example you can add (grid-template-columns: 200px 200px) or (grid-template-rows 100px 100px), which will display only two columns and two rows.

Features of CSS Grid

Distributing space
The CSS Grid layout has a property that allows you to set the size of a column or row, The fractional unit(fr)is the property that allows you to automatically distribute space between your columns and rows.

Grid-template shorthand
The shorthand hand property of the CSS Grid layout allows you to save time when designing a web page. Instead of writing(grid-template-rows 100px 1fr;) you could write (grid-template: auto 100px / 1fr) and your columns and rows will still be created.

Using the repeat () property to keep track of listings
The repeat property allows you to keep track of listings. Instead of typing (grid-template-rows: 1fr 1fr 1fr;), you could type (grid-template-rows: repeat(3, 1fr);).

Updates to the CSS Grid layout

In 2017 the CSS Grid layout became available for most mainstream browsers. The creators of the CSS Grid layout continue to work on the subgrid feature, which allows users to line up grids within each other more efficiently.

CSS Grid and the future
The CSS Grid layout continues to be updated and appears to be paving the way for the future.

            <style>

            .wrapper {
                    display: grid;
                grid-gap: 10px;
                    grid-template-columns: 100px 100px 100px;
                    background-color: #fff;
                    color: #444;
                }

                .box {
                    background-color: #444;
                    color: #fff;
                    border-radius: 5px;
                    padding: 20px;
                    font-size: 150%;

                }

                .a {
                    grid-column: 1 / span 2;
                }
                .b {
                    grid-column: 3 ;
                    grid-row: 1 / span 2;
                }
                .c {
                    grid-column: 1 ;
                    grid-row: 2 ;
                }
                .d {
                    grid-column: 2 ;
                    grid-row: 2 ;
                }
            </style>

            <div class="wrapper">
              <div class="box a">A</div>
              <div class="box b">B</div>
              <div class="box c">C</div>
              <div class="box d">D</div>
            </div>