Media Query:

Media query is used to create a responsive webdesign across all screen size.
The basic syntax of media query is.

@media media-type (media-feature){
        /*Styles go here*/
}

Media Queries Examples. The following example change the background color to 'red', if the viewport(screen size) is 680px or wider than 680px.when screen size will reduce to less than 680px then it will appears in default background color.

@media screen (mix-width: 680px){
        body{
              background-color: red;
        }
}

Now we want to add (max-width:600px) for the media query which tells the computer to target that device whose screen size is 600px or less that 600px.below example change the background color to 'yellow', when screen size has 600px or less than 600px.

@media screen (max-width: 600px){
        body{
              background-color: yellow;
        }
}

We can also write (min-width) and (max-width) both at a time like we want to change the background color to 'purple', when the screen size is less that 900px and greater than 600px. We will use and operator to accomplish this.

@media screen (min-width:600px) and (max-width:900px){
          body{
                background-color: purple
        }
}

Grid in CSS:

Grid is used to create two-dimensional layout on the web. Grid property offer grid based layout system having row and column.

We will consider the below example for grid understanding.

<div class="container">
             <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items item4">4</div>
            <div class="items">5</div>
    </div>

Grid Properties:

1. display:grid; Grid item are placed in row by-default and span the full width of grid container.

2. grid-template-rows: 50px 100px; A row is created for for each value of grid-template-rows, here we write two value so two row will be created one is 50px and second is 100px take height of the available space as rows and if there are more content in container then their height will be define by the each content of container.

3. grid-template-columns: 80px 60px 100px; Same as rows, the column will be created for each value of grid-template-columns, three column will be created for item 1, 2, 3 and item 4, 5 will placed on a new row track because only three column we have define.

4. grid-template-columns: 1fr 2fr 1fr; Here we changed the value of property in fr, fr is a fractional unit and 1fr means 1 part of the available space.

5. grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(4, 1fr);
Here we use repeat notation, the first represent the number of times the track will repeat and second is the size (track definition).

Grid Gaps:

1. grid-row-gap: 30px;
grid-column-gap: 5rem;
Gap property is used to create gap between the column and row

Grid Positions:

We write grid position on grid container items.
1. grid-row-start: 2; If we write this property to any item that item will start from second row of container.
2. grid-row-end: 4; This property is used for, where we want to endup the item, So the item start from row 2 and ends on row 4.

3. grid-row-start: 2; If we write this property to any item that item will start from second column of container.
4. grid-row-end: 4; This property is used for, where we want to endup the item, So the item start from column 2 and ends on column 4.