css div row code example

Example 1: put divs in rows and colums

//html

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

//css

.Row {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column {
    display: table-cell;
    background-color: red; /*Optional*/
}

Example 2: css row

.item1 {
  grid-row: 1 / span 2;
}
/* Example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-row
*/

Example 3: bootstrap breakpoints

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }