Step 1 - 4 Squares with BordersCreate a 2 by 2 grid using 4 divsEach div will represent a squareCreate a class for the square and add it to each div elementAdd CSS properties to the class and set the width and height to 20 pixelsAlso, add CSS properties to the class to add a 1 pixel border to the elementsThe result should look like this:check code

Step 2 - Floating Elements Inside ContainerCopy the code from the previous stepCreate a container div that includes the 4 squaresCreate a new CSS class for the containerWe have 2 rows and 2 columns, each one with 20 pixels and a border of 1 pixel on each side. This means we need to set the container width and height to 44 pixelsUse the float CSS property to have the divs arrange within the available spaceThe result should look like this:

How do you display a border like this:The top border = 10 pixelsThe bottom border = 5 pixelsThe left border = 20 pixelsThe right border = 1pixel?{$a->questionintifier} Yanıta.border-width:10px 1px 5px 20px;b.border-width:10px 5px 20px 1px;  c.border-width:5px 20px 10px 1px;d.border-width:10px 20px 5px 1px;

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?.grid {  grid-template-rows: repeat(2, 50px);  grid-template-columns: repeat(2, 100px);  grid-auto-rows: 60px;  grid-auto-columns: 70px;}60px50px100px70px0px

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what height would it have?.grid {  grid-template-rows: repeat(2, 50px);  grid-template-columns: repeat(2, 100px);  grid-auto-rows: 60px;  grid-auto-columns: 70px;}60px100px50px70px0px

Question 5When designing a website using CSS grid, what code can you use to design three columns where the second column uses twice the space as the other two?1 pointgrid-template-rows: 1fr 2fr 1fr;grid-auto-columns: auto;grid-template-columns:1fr2fr1fr;grid-column-gap: 2fr;