display

basic display css

                
                    .dis-inblock {
                        display: inline-block;
                    }
                    
                    .dis-hidden {
                        display: none;
                    }               
                
            

flex css

                
                    .flx {
                        display: flex;
                    }
                    
                    .flx-row {
                        flex-direction: row;
                    }
                    
                    .flx-column {
                        flex-direction: column;
                    }
                    
                    /*to get the flex item at the start of major axis*/
                    .flx-order-start {
                        order: -1;
                    }
                    
                    .flx-grow-1 {
                        flex-grow: 1;
                    }
                    
                    /*layout of flex items along major axis*/
                    .flx-maj-stretch {
                        justify-content: space-between;
                    }
                    
                    .flx-maj-even {
                        justify-content: space-evenly;
                    }
                    
                    .flx-maj-start {
                        justify-content: flex-start;
                    }
                    
                    .flx-maj-end {
                        justify-content: flex-end;
                    }

                    /*layout of flex items along minor or cross axis*/
                    .flx-min-center {
                        align-items: center;
                    }
                    
                    /*layout of flex items along both the axis*/
                    .flx-center {
                        align-items: center;
                        justify-content: center;
                    }
                
            

responsive grids

1

2

1

2

3

1

2

3

4

                
                    .grid {
                        display: grid;
                    }
                    
                    .grid-maxcols-2 {
                        grid-template-areas: "item1 item2";
                    }
                    
                    .grid-maxcols-3 {
                        grid-template-areas: "item1 item2 item3";
                    }
                    
                    .grid-maxcols-4 {
                        grid-template-areas: "item1 item2 item3 item4";
                    }
                    
                    .grid-itm1 {
                        grid-area: item1;
                    }
                    
                    .grid-itm2 {
                        grid-area: item2;
                    }
                    
                    .grid-itm3 {
                        grid-area: item3;
                    }
                    
                    .grid-itm4 {
                        grid-area: item4;
                    }     
                
            

check the responsive utility page here to understand the responsiveness.