Esse repo é uma lembrança para brincar com Grid (feita em Svelte) que possui algumas considerações conforme fui estudando sobre:
Pra rodar:
- clonar
yarnyarn dev
Esse doc vai ser atualizado conforme for manjando mais das props, mas acho que já é o bastante para montar a maioria das interfaces gráficas.
Basicamente, usar grid-template-areas, grid-template-rows e grid-template-columns para montar seu grid mentalmente. Ai só ligar as coisas com o grid-area no componente filho.
/**
Corpo que contêm o grid e pega a página inteira
*/
#body {
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
/**
Definição do grid
*/
main {
margin: 20px;
display: grid;
/**
Página de cadastro
*/
grid-template-areas:
"name name surname surname"
"email email email button"
"address address address number"
"password password password password"
"ok ok ok ok";
/**
Espaçamento entre linhas e colunas
*/
grid-row-gap: 10px;
grid-column-gap: 20px;
/**
Tamanho das linhas e colunas
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows:
40px
40px
40px
40px
40px;
}
/**
Definição de um componente que vai tomar metade da primeira linha
*/
#name {
grid-area: name;
}Eu preferi utilizar dessa forma pois fica separado o bastante assim como visual (na parte do template-areas) o bastante manter a manutenção do grid.
Basicamente, definir um grid, deixar umas colunas a mais com template, e usar só o component do overlap com grid-row e grid-column
/* Definir corpo do overlap */
#overlap-1 {
display: grid;
grid-template-areas:
". d d . ."
"a a a a ."
"b b b b ."
"c c c c .";
grid-template-columns: repeat(5, minmax(0, 50px));
grid-template-rows: repeat(4, minmax(0, 50px));
border-radius: 20px;
overflow: hidden;
}
/* filhos com template-area */
#overlap-a {
grid-area: a;
background-color: red;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
#overlap-b {
grid-area: b;
background-color: green;
}
#overlap-c {
grid-area: c;
background-color: blue;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#overlap-circle {
/* inicial linha, inicial coluna */
/* final linha, final coluna (intervalo aberto)*/
grid-area: d / d / a / d;
background-color: grey;
opacity: 0.5;
border-radius: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 15px;
}
#overlap-x {
/* por números */
grid-area: 1 / 4 / 3 / 6;
background-color: black;
border-radius: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 30px;
margin-right: 40px;
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}#body {
/**
Cria um corpo superior
*/
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
main {
/**
Coloca margin no teu grid
*/
margin: 20px;
display: grid;
}Ou você também pode adicionar o padding dobrado no teu grid (preferencia aqui)
main {
padding: 30px;
width: calc(100vw - 60px);
height: calc(100vh - 60px);
display: grid;
}É problema relacionado ao meta no index.html, setar o meta para:
<!-- Não brincar com scale -->
<head>
<meta name="viewport" content="width=device-width" />
</head>Esse foi o que mais me fodeu, mas depois de uma caça incessante achei: essa resposta que me levou a essa
No final, o código que importa é:
/**
minmax(0, 1fr) é o importante no lugar de só 1fr
*/
grid-template-columns: repeat(4, minmax(0, 1fr));<script></script>
<style>
#body {
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
main {
margin: 20px;
display: grid;
grid-template-areas:
"name name surname surname"
"email email email button"
"address address address number"
"password password password password"
"ok ok ok ok";
grid-row-gap: 10px;
grid-column-gap: 20px;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows:
40px
40px
40px
40px
40px;
}
#name {
grid-area: name;
}
#surname {
grid-area: surname;
}
#email {
grid-area: email;
}
#address {
grid-area: address;
}
#number {
grid-area: number;
}
#password {
grid-area: password;
}
#button {
grid-area: button;
}
#ok {
grid-area: ok;
}
</style>
<div id="body">
<main>
<input id="name" placeholder="nome" />
<input id="surname" placeholder="sobrenome" />
<input id="email" placeholder="email" />
<input id="address" placeholder="endereço" />
<input id="number" placeholder="número" />
<input id="password" placeholder="senha" />
<button id="button">Ok</button>
<button id="ok">Salvar</button>
</main>
</div>