Aprenda a Criar Grid em CSS3

Os layouts de grade (Grid) no CSS3 são uma técnica poderosa para criar designs de página eficientes e responsivos.

[{"selector":"#anim-5510703c-1a6e-4e9c-9333-07f1b5f56b9e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(10.934722122295714%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-6c2a4278-e8b1-4dbc-b13e-20d8119b881c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56e53005-4554-4e1b-b5aa-be541e8010ff","keyframes":{"transform":["translate3d(116.02564%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é Grid?

[{"selector":"#anim-a2fdc618-f778-4ee7-b41d-7d2ff4451339 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-40.04629618252202%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bddf245f-b9ed-49aa-95d1-0e7cd2a29473","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7550e17-b20d-4431-a47d-15ee61ab1121","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6fb6f13d-ce73-4888-b8a4-d71301c438a6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d1e835ed-3371-4910-9d8d-37ccb4807545","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-628ba172-76bc-4db2-a8b7-5a1a9df4b1a5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-81502504-00e1-4fe8-b057-aa04c0471490","keyframes":{"transform":["translate3d(114.92064%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como funciona o Grid?

[{"selector":"#anim-e0c10166-6d2a-4747-b2f0-4624ee6d7acf [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-21.990740626966474%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-a40c989e-7cec-44c8-b7fc-79eb2aee36f3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c136696b-e58a-453c-a55d-301c0bdd52fc","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-38bec6de-93cf-4a62-bb06-81c1c438df5e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05e00540-9eee-49f1-a989-ddc4836fdd75","keyframes":{"transform":["translate3d(-115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Propriedades do Grid

[{"selector":"#anim-3c08eb5e-521d-4532-8030-4804af06396b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(18.593899984296943%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-e36fc8a3-cdf8-4f38-929b-4645dfefcb98","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4cefa169-7848-4581-9eed-4c6e260c663d","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06d4ac05-5f30-4d26-9f23-b8e8a2b6660f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-686f40ed-8b3a-4e03-bc07-0964aa4ff050","keyframes":{"transform":["translate3d(115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-810987e2-887c-4a48-9f1a-44c060334fa4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9c11aad-4d3b-4367-bcd5-d95fd3c4d279","keyframes":{"transform":["translate3d(-115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d160010f-5c7b-4a1b-8b2b-7ed7be84d273","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6ec63dae-30db-4dbc-adad-b0f9cf15ccd9","keyframes":{"transform":["translate3d(115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Exemplos de Grid

[{"selector":"#anim-4780987d-2e74-4844-850f-57a39ffdb194 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-28.90624987200394%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bd2d41c1-4084-423b-808e-af62836e3c64","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ab08293-3077-4136-97e0-392a5151aa6d","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2649ac10-a8ea-4b04-99af-af8af265dc2c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9b629028-2b5a-408d-b790-3187bd83ae86","keyframes":{"transform":["translate3d(0px, 117.01043%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Melhores práticas

[{"selector":"#anim-447f2c25-9170-4bd9-a8e3-9dee82a2fb45 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-9.537037071759258%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-edd0d040-dd77-4d98-ba65-18a7aa73c6fc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eddc9f3e-7b5f-4771-a4c6-1af5cf3fb581","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d2323c9f-ed45-4382-9b77-8a0f7e10d018","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-205c5905-57ec-4654-bdcc-7f11e04a10e2","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-384b353b-be79-41e9-86f9-67dff6c48fd4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6a39b4f-f1ac-4885-a0fb-3818efd991e5","keyframes":{"transform":["translate3d(0px, 134.92064%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Ao trabalhar com Grid, portanto, aqui estão algumas dicas e melhores práticas para lembrar: Use Flexbox em vez de float; Pense em termos de linhas e colunas para organizar seu layout; Experimente diferentes propriedades para encontrar a combinação certa para seu design.

Aprenda sobre o Grid no CSS3

[{"selector":"#anim-ecd436bb-532e-4379-9f0f-723a97b2de14 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-66dcdeab-d39c-4ae7-9ecc-94b8ce45c6f5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5a21b94e-be82-42ab-ae7f-0618f7b9d7bd","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a94e4ef4-f944-462d-a8e2-6d98431f664b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1ee988a3-ddea-4a5b-bfae-fe05aeeda3bf","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Leia mais

Aprenda a Criar Grid em CSS3

Os layouts de grade (Grid) no CSS3 são uma técnica poderosa para criar designs de página eficientes e responsivos.

O que é Grid?

O Grid é uma técnica de layout no CSS3 que permite dividir uma página em uma grade de linhas e colunas.

Como funciona o Grid?

O Grid é baseado em um sistema de linhas e colunas. As linhas são definidas verticalmente e as colunas horizontalmente, criando uma grade na página.

Propriedades do Grid

Existem várias propriedades no Grid que permitem ajustar o layout das células e da grade.

display grid-template-columns grid-template-rows grid-column grid-row

Exemplos de Grid

Melhores práticas

Aprenda sobre o Grid no CSS3

Confira nosso artigo completo sobre Grid no CSS3 clicando logo abaixo!