Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Setting Up Masonry.js | Getting Started with Masonry.js
JavaScript Masonry Layouts for Responsive Grids

bookSetting Up Masonry.js

To begin using Masonry.js for building Pinterest-style responsive grid layouts, you first need to include the library in your project and set up a basic grid structure. You can add Masonry.js either by linking to a Content Delivery Network (CDN) or by downloading the file and referencing it locally. The CDN approach is faster for prototyping, while the local method is better if you want to work offline or bundle the script with your project files.

A grid container is the parent element that holds all your grid items. Each grid item is a direct child of this container and represents an individual block in your layout, such as a card or image box. Masonry.js works by dynamically positioning these grid items so that they fit together tightly, minimizing gaps and creating a visually appealing, responsive arrangement.

Next, you'll see how to include Masonry.js in a simple project, create a grid container, add a few items, and initialize the Masonry layout with JavaScript.

index.html

index.html

style.css

style.css

script.js

script.js

copy
question mark

What is the primary purpose of initializing Masonry.js on a grid container?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me how to include Masonry.js using a CDN?

What does the basic HTML structure for the grid look like?

How do I initialize Masonry.js with JavaScript?

bookSetting Up Masonry.js

Deslize para mostrar o menu

To begin using Masonry.js for building Pinterest-style responsive grid layouts, you first need to include the library in your project and set up a basic grid structure. You can add Masonry.js either by linking to a Content Delivery Network (CDN) or by downloading the file and referencing it locally. The CDN approach is faster for prototyping, while the local method is better if you want to work offline or bundle the script with your project files.

A grid container is the parent element that holds all your grid items. Each grid item is a direct child of this container and represents an individual block in your layout, such as a card or image box. Masonry.js works by dynamically positioning these grid items so that they fit together tightly, minimizing gaps and creating a visually appealing, responsive arrangement.

Next, you'll see how to include Masonry.js in a simple project, create a grid container, add a few items, and initialize the Masonry layout with JavaScript.

index.html

index.html

style.css

style.css

script.js

script.js

copy
question mark

What is the primary purpose of initializing Masonry.js on a grid container?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 2
some-alt