How do I create a 3x3 grid via CSS

0 votes

Given 9 divs one after another, I want to create a grid 3X3 via CSS.

How do I do that?

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Given 9 divs one after another, I want to create a grid 3X3 via CSS.

How do I do that?

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

 Run code snippet

Expand snippet


Note: I don't want float/clear solution. Focus is on CSS and not HTML restructure.

If I add content: '\A'; white-space: pre; to ::after output comes out to be ugly.

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

.cell:nth-child(3n)::after {
  display: inline;
  content: '\A';
  white-space: pre;
}
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

How do I go about getting all div in a 3X3 row-column layout?

Aug 12 in CSS by Edureka
• 11,040 points
72 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
52 views
0 votes
0 answers

How can I create a round arrow with only HTML and CSS?

Using CSS and HTML, I'm attempting to ...READ MORE

Jul 8 in CSS by Edureka
• 11,040 points
57 views
0 votes
1 answer

How do I specify row heights in CSS Grid layout?

Apparently, the auto value on the grid-template-rows property does exactly what ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
222 views
0 votes
0 answers

How do I center a list of text and then justify it in a w3.css column?

I am unable to center the contact ...READ MORE

Aug 17 in CSS by Edureka
• 11,040 points
13 views
0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
40 views
0 votes
1 answer
0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
322 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22 in CSS by Edureka
• 11,040 points
42 views
0 votes
1 answer

How can I set a css border on one side only?

Use four values to add a border ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
38 views
0 votes
0 answers

How do I rotate text in css?

How can I rotate text using CSS ...READ MORE

Jun 30 in CSS by Edureka
• 11,040 points
80 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP