The attr() CSS function returns the value of an attribute of the selected element using CSSYou can try to run the following code to implement the attr() function in CSSExampleLive Demo                    a:before {content: " (" attr(href) ")";}                     Information Resource       Resource: Welcome to Qries    

To display columns and rows using named CSS, use the grid-area property, with the grid-template-areas propertyExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-areas: 'demo demo . . .' 'demo demo . . .';             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: demo;          }                     Game Board                1          2          3          4          5          6          

To implement animation on the bottom property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 200px;             height: 300px;             background: yellow;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;          }          @keyframes myanim {             20% {                bottom: 100px;             }          }                     Performing Animation for bottom property          

Use the grid-row-gap property to set the size of the gap between rows in CSSExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-column-gap: 30px;             grid-row-gap: 50px;             background-color: #95A5A6;             padding: 10px;          }          .container>div {             background-color: #F0F3F4;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele3 {             grid-column-end: span 2;          }                              1          2          3          4          5          6          

Use the grid-column-gap property to set the size of the gap between grid columns in CSSExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-column-gap: 30px;             grid-row-gap: 20px;             background-color: #2E86C1;             padding: 10px;          }          .container>div {             background-color: #F2D7D5;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele3 {             grid-column-end: span 2;          }                              1          2          3          4          5          6          

Use the grid-column-end property to set where to end the grid item. You can try to run the following code to implement the grid-column-end propertyExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele3 {             grid-column-end: span 2;          }                              1          2          3          4          5          6          

Use the grid-auto-flow property to set how auto-placed items are inserted in grid. You can try to run the following code to implement the grid-auto-flow propertyExampleLive Demo                    .container {             display: grid;             grid-auto-columns: 50px;             grid-auto-flow: column;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the grid-auto-rows property to set a default size for the row.You can try to run the following code to implement the grid-auto-rows property with CSS ExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 60px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the all property to reset all the properties. Set all property to initial, inherit or unset.You can try to run the following code to implement the CSS all propertyExampleLive Demo                    html {             color: blue;          }          #demo {             background-color: yellow;             color: red;             all: inherit;          }                     CSS all property       This is demo text.    

Use the white-space property to work with white-space inside an elementExampleLive Demo                    p.demo1 {             white-space: normal;          }          p.demo2 {             white-space: pre;          }                     Control white-space                This is demo text.          This is demo text.                      This is demo text.          This is demo text.