HTML Criar sistema de grid com bordas

EddK · 29 de julho de 2021

Boa noite!

Alguém sabe como criar essas box com bordas:

fonte: meucupom.com/categorias

obs.: achei muito interessante o sistema

GusTec · 30 de julho de 2021

@EddK Crie o sistema de grid normalmente, defina o tamanho que você preferir, no css faça as seguintes definições:

border-top: none;

border-left: none;

border-botton: 1px solid #000;

border-right: 1px solid #000;

Isto fará com que o grid mostre as bordas somente na parte de baixo e do lado direito.

você terá que criar um identificador para apontar qual é o último grid da direita e o último da parte de baixo da tela, nestes você ajusta o css para não mostrar a borda do lado direito, nem na parte de baixo.

EddK · 31 de julho de 2021

@GusTec Alguma dica de como criar esse identificador (para apontar o último grid da direita e último da parte de baixo)?

GusTec · 31 de julho de 2021

@EddK use uma ID para identificar estes grids, depois é só estilizar as bordas no CSS

EddK · 31 de julho de 2021

4 horas atrás, EddK disse:

@GusTec Alguma outra forma para ter menos códigos?

Swalls · 1 de agosto de 2021

9 horas atrás, EddK disse:

@GusTec Alguma outra forma para ter menos códigos?

acredito que esse link lhe ajude um pouco a como fazer isso.

GusTec · 2 de agosto de 2021

@EddK eu acredito que não precise de muitas linhas para estilizar estas bordas, como falei acima, basta você identificar as colunas, por exemplo:

  #ultima-coluna-direita{
            border-style: none none solid solid ;
            border-width: 1px;
            border-color: #000;
        }

Com este código você já deixa as bordas iguais a última coluna da direita do exemplo que você passou. Pra testar, copie o código abaixo para um arquivo .html e você vai ver como funciona.

Lembrando que para o border-style a sequência dos valores é: topo (none), direita (none), abaixo (solid), esquerda (solid).

Para você mudar onde quer que as bordas apareçam, basta trocar os valores "none" por "solid" nos locais desejados.

Os valores width e heigth abaixo eu coloquei só pra formar um quadrado para poder exemplificar as bordas, você pode retirar, pois o tamanho do quadrados será definido pelo grid.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        
        #ultima-coluna-direita{
            border-style: none none solid solid ;
            border-width: 1px;
            border-color: #000;

            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>

    <div id="ultima-coluna-direita">
        teste
    </div>

</body>
</html>