how to color 3 by 2 grid boxes in css

Asked

Viewed 113 times

0

I have the following html code:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

and my css is:

* {
box-sizing: border-box;

}

.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 50px 50px;

}

I want every little box to have a different color

html css grid flexbox webdesign

  • Just put a background-color for each div... I could not understand exactly your problem...

  • Does each div have to have a class?

  • 1

    can be by class or by putting a style right into the div tag. create with classes, type . red {background-color: red}, so you can use class="red" on all the elements you want that color, do the same for the other 5 colors you’ll need and that’s it, there’s no mystery. Your question is not clear, it does not explain right how you want the colors, what the limitations or rules etc

1 answer

0


Without modifying HTML, you can use :nth-child and add style according to the position between "brothers".

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 50px 50px;
}

.wrapper div:nth-child(1) { background: red }
.wrapper div:nth-child(2) { background: green }
.wrapper div:nth-child(3) { background: blue }
.wrapper div:nth-child(4) { background: yellow }
.wrapper div:nth-child(5) { background: cyan }
.wrapper div:nth-child(6) { background: orange }
<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Browser other questions tagged html css grid flexbox webdesign

You are not signed in. Login or sign up in order to post.