CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?.grid {display: grid;width: 500px;grid-template-columns:50px 1fr 2fr;}AThe first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.BThe first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.CThe first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.DThe first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.

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

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;

Which of the following is true about CSS Grid?Question 6Answera.It is only suitable for one-dimensional layouts.b.It is best suited for complex layouts with both rows and columns.c.It can't be combined with Flexbox in the same layout.d.It only works with fixed-width elements.

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

The Bootstrap grid system is based on how many columns?