ในการกำหนด div ให้มีลักษณะการแสดงผลในรูปแบบของ rows และ columns มีได้หลายวิธีด้วยกัน วิธีแรกคือเป็นการกำหนดการแสดงผลด้วย float

.block {
    clear: both;
    width: 500px;
}
.block > div {
    float: left;
    width: 33.33%;
}

<div class=block>
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
    <div>Cell 4</div>
    <div>Cell 5</div>
    <div>Cell 6</div>
</div>

ตัวอย่าง วิธีนี้มีข้อดีที่หากจำนวนคอลัมน์ในแถวสุดท้ายไม่ได้มีครบ 3 คอลัมน์ตามต้องการ แต่ละเซลยังสามารถแสดงผลในขนาดที่ถูกต้องได้ และแต่ละเซลของวิธีนี้ยังสามารถเรียงต่อๆกันไปโดยไม่มีช่องว่าง (ถ้ากำหนดใช้ display:inline-block แทน float:left การขึ้นบรรทัดใหม่ของโค้ดอาจทำให้เกิดช่องว่างระหว่างเซลได้) ในขณะที่ข้อเสียของวิธีนี้คือ จำเป็นต้องกำหนดความสูงของแต่ละเซลให้มีขนาดเท่าๆกันเสมอ มิฉะนั้นเซลแต่ละเซลในแถวถัดไป อาจไม่อยู่ในตำแหน่งที่เหมาะสม

อีกวิธีที่สามารถทำได้คือการกำหนดรูปแบบการแสดงผลในลักษณะของตาราง โดยการใช้คำสั่งของ CSS ในรูปแบบที่ตารางใช้

.table {
    display: table;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell
}

<div class=table>
    <div class=tr>
        <div class=td>Cell 1</div>
        <div class=td>Cell 2</div>
        <div class=td>Cell 3</div>
    </div>
    <div class=tr>
        <div class=td>Cell 4</div>
        <div class=td>Cell 5</div>
        <div class=td>Cell 6</div>
    </div>
</div>

ตัวอย่าง วิธีนี้สามารถหลีกเลียงปัญหาเรื่องความสูงของ element ได้ และการแสดงผลในตำแหน่งของคอลัมน์จะเท่ากันเสมอ