Skip to main content
Fim da Recompensa com 50 pontos de reputação concedidos por Murilo Melo
adicionou 207 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.top, .child, .bottom, .v-block, .big-block {
   box-sizing: border-box;
}


.main {
    width: 100%;
    height: 100%;
}

.top {
    width: 100%;
    height: 66.6665%;
}

.bottom {
    width: 100%;
    height: 33.3335%;3332%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;3332%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;

    /*sombra só pra identificar o childs*/
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,.26);
}
.v-block > .child {
    height: 50%;
}
.rowbottom > .child {
    float: left;
    width: 33.3335%;3332%;
    height: 100%;
}
<div class="main">
    <div class="top">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="bottom">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.top {
    width: 100%;
    height: 66.6665%;
}

.bottom {
    width: 100%;
    height: 33.3335%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="top">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="bottom">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.top, .child, .bottom, .v-block, .big-block {
   box-sizing: border-box;
}


.main {
    width: 100%;
    height: 100%;
}

.top {
    width: 100%;
    height: 66.6665%;
}

.bottom {
    width: 100%;
    height: 33.3332%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3332%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;

    /*sombra só pra identificar o childs*/
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,.26);
}
.v-block > .child {
    height: 50%;
}
.bottom > .child {
    float: left;
    width: 33.3332%;
    height: 100%;
}
<div class="main">
    <div class="top">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="bottom">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
adicionou 81 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.rowtop {
    width: 100%;
    height: 50%;66.6665%;
}

.bottom {
    width: 100%;
    height: 33.3335%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="row">class="top">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="row">class="bottom">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.row {
    width: 100%;
    height: 50%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="row">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="row">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.top {
    width: 100%;
    height: 66.6665%;
}

.bottom {
    width: 100%;
    height: 33.3335%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="top">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="bottom">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>
adicionou 1702 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
/*o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar*/
html, body {
    height: 100%;
}

.flex-parent {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
}

.col {
    -webkit-flex-direction: row-reverse;column; /* Safari 6.1+ */
    flex-direction: column;
}

.flex-child {
    width: 100%;
    height: 100%;
    background-color: #c0c0c0;
    margin: 2px;
}
<div class="flex-parent col">
    <div class="flex-parent">
        <div class="flex-parent">
            <div class="flex-child">Filho 0</div>
        </div>
        <div class="flex-parent col">
            <div class="flex-child">Filho 1</div>
            <div class="flex-child">Filho 2</div>
        </div>
    </div>

    <div class="flex-parent">
        <div class="flex-child">Filho 1</div>
        <div class="flex-child">Filho 2</div>
        <div class="flex-child">Filho 3</div>
    </div>
</div>

Se tem alguma preocupação com navegadores mais antigos, como alguns mobile por exemplo, pode experimentar usando float: ...; e ajustando a porcentagem da largura e altura conforme necessário, um exemplo:

/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.row {
    width: 100%;
    height: 50%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="row">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="row">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>

html, body {
    height: 100%;
}

.flex-parent {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
}

.col {
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    flex-direction: column;
}

.flex-child {
    width: 100%;
    height: 100%;
    background-color: #c0c0c0;
    margin: 2px;
}
<div class="flex-parent col">
    <div class="flex-parent">
        <div class="flex-parent">
            <div class="flex-child">Filho 0</div>
        </div>
        <div class="flex-parent col">
            <div class="flex-child">Filho 1</div>
            <div class="flex-child">Filho 2</div>
        </div>
    </div>

    <div class="flex-parent">
        <div class="flex-child">Filho 1</div>
        <div class="flex-child">Filho 2</div>
        <div class="flex-child">Filho 3</div>
    </div>
</div>
/*o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar*/
html, body {
    height: 100%;
}

.flex-parent {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
}

.col {
    -webkit-flex-direction: column; /* Safari 6.1+ */
    flex-direction: column;
}

.flex-child {
    width: 100%;
    height: 100%;
    background-color: #c0c0c0;
    margin: 2px;
}
<div class="flex-parent col">
    <div class="flex-parent">
        <div class="flex-parent">
            <div class="flex-child">Filho 0</div>
        </div>
        <div class="flex-parent col">
            <div class="flex-child">Filho 1</div>
            <div class="flex-child">Filho 2</div>
        </div>
    </div>

    <div class="flex-parent">
        <div class="flex-child">Filho 1</div>
        <div class="flex-child">Filho 2</div>
        <div class="flex-child">Filho 3</div>
    </div>
</div>

Se tem alguma preocupação com navegadores mais antigos, como alguns mobile por exemplo, pode experimentar usando float: ...; e ajustando a porcentagem da largura e altura conforme necessário, um exemplo:

/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
    margin: 0;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.row {
    width: 100%;
    height: 50%;
}

.big-block {
    width: 66.6665%;
    height: 100%;
    float: left;
}
.v-block {
    float: left;
    width: 33.3335%;
    height: 100%;
}

.child {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.v-block > .child {
    height: 50%;
}
.row > .child {
    float: left;
    width: 33.3335%;
    height: 100%;
}
<div class="main">
    <div class="row">
        <div class="big-block">
            <div class="child">Filho 0</div>
        </div>
        <div class="v-block">
            <div class="child">Filho 1</div>
            <div class="child">Filho 2</div>
        </div>
    </div>

    <div class="row">
        <div class="child">Filho 3</div>
        <div class="child">Filho 4</div>
        <div class="child">Filho 5</div>
    </div>
</div>

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando