Create large amount of cells

Report · Dec 05, 2016

Hello

Pseudo-Tables with Definition Lists

I saw Nancy's layout in the forum a month or so back and tried this as seen in the link.

I added a div wrapper of 70%. Just an exercise to see if I could create a large amount of cells. Example about 40

Question: Why is their a gap showing?

I thought the cells would be continuous.

Another question: What is the best way to create a layout with multiple boxes/cells like a calendar or table with many cells?

David

Report · Dec 05, 2016

Flexbox:

<!DOCTYPE html>

<html>

<head>

<title>Flexbox</title>

<style>

* {

box-sizing: border-box;

}

.cells {

width: 70%;

margin: 0 auto;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.cells div {

width: 11.1%;

border: 1px dotted silver;

text-align: center;

padding: 10px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Report · Dec 05, 2016

The gap is caused by the browser default margin-top and margin-bottom on <dl> tags.

Adding the following to your css will fix that...

dl {
float:left;
margin:0;

}

Report · Dec 05, 2016

Thanks Osgood and Jon Fritz II

This fixed the issue with the margin and I learned something about Flexbox

More here: A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox

W3 School

http://www.w3schools.com/css/css3_flexbox.asp

Adobe Community

Create large amount of cells

1 Correct answer