Web Development Articles - Page 767 of 1049

The grid-template-columns property is used to set the number of columns in the Grid.ExampleYou can try to run the following code to implement the grid-template-columns property −Live Demo                    .container {             display: grid;             background-color: blue;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to style pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             float: left;             padding: 7px 10px;               text-decoration: none;          }                     Our Quizzes                          

You can try to run the following code to vertically align the grid using the align-content property −ExampleLive Demo                    .container {             display: grid;             background-color: gray;             align-content: center;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

Align flex lines with CSS align-content property. You can try to run the following code to implement the align-content property. It adds space around the items:ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the align-items property with value flex-start to align flex items on the top.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

Use the justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-end;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz             Q1       Q2       Q3       Q4          

Use the justify-content property with value flex-start to align the flex-items at the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

You can try to run the following code to align the grid inside the container using the justify-content property:ExampleLive Demo                    .container {             display: grid;             background-color: gray;             grid-template-rows: 120px 90px 100px;             justify-content: space-evenly;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: yellow;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to create a responsive pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: blue;             float: left;             padding: 3px 8px;             text-decoration: none;          }                     Our Quizzes                          

You can try to run the following code to fade in on button hover with CSSExampleLive Demo                    .btn {             background-color: orange;             color: white;             padding: 10px;             text-align: center;             font-size: 16px;             margin: 5px;             opacity: 0.5;             transition: 0.5s;             display: inline-block;             text-decoration: none;             cursor: pointer;          }          .btn:hover {             opacity: 2          }                     Result