Geek Answers Handbook

Create a grid with CSS starting with a simple HTML list

Is there a way to create CSS in CSS:

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------

from this:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

(the order of the elements is not so important)

UPDATE

I need the “columns” to be as wide as their widest “cell”; and I need "rows" to be as tall as their tallest "cell"; in short ... table! There are no "table headers": all cells are hierarchically on the same level.

UPDATE 2

- : (.. ) ; , . - , , , .

, , , !

, :

Table-like grid

( "" )

HTML-. , , anwser: ; ...

+4
3

li. , , .

ul {
  width: 500px;
}
li {
  width: 50%;
  float: left;
  border: 1px solid #000;
  margin: 0;
  list-style-type: none;
  box-sizing: border-box;
}
li:nth-child(odd) {
  clear: left;
}
<ul>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
</ul>
Hide result
+6

flexbox:

  • 50%,

ul {
    display: flex;              /* establish flex container */
    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none;      
}

li {
    flex: 0 0 50%;              /* don't grow, don't shrink, fixed width of 50% */
}

/* non-essential decorative styles */
li              { text-align: center;           }
li:nth-child(1) { background-color: lightgreen; }
li:nth-child(2) { background-color: lightblue;  }
li:nth-child(3) { background-color: lightpink;  }
li:nth-child(4) { background-color: lightgray;  }
<ul>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
</ul>
Hide result

flexbox:

  • ;
  • , , ,
  • , , , flexbox - (CSS3) .

flexbox, :

:

Flexbox IE 8 9. , Safari 8 IE10, . , , Autoprefixer. .

+2

li ,

ul {
  margin:0; 
  padding:0;
  list-style-type: none;
  box-sizing: border-box;
}
li {
  width: 49%;
  float: left;
  border: 1px solid #000;
}
<ul>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
</ul>
Hide result
0

More articles:


All Articles