University
Home
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Display: grid

Display: grid

The display: grid CSS property defines a website element (such as a button or header) as a grid container. Once defined this way, you can create customized grid sections via additional commands. Traditional grid sections include a web page header, menu, main section, and footer.

Designers often implement display: grid when creating larger website layouts with CSS, as grids are an effective way to structure a website and place elements where they’ll stand out to viewers, especially when balancing a lot of content on a single page.

By default, display: grid sets sections as rows that fill the entire element width. Developers often modify this behavior using CSS code to achieve the look web designers want, whether that’s setting specific sections by pixel dimension or setting rules for how all grid sections behave.

This approach saves time compared to more tedious, unwieldy positioning options. Using a grid also ensures the website is responsive and can adjust more readily to different screen sizes. You can also match any grid to a previously-conceived website layout, wireframe, or template.

Relevant courses

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Zapier

→
A web app that helps you connect multiple third-party services together based on triggers and actions.

Typography

→
A section in the Add panel that houses typography elements such as headings and paragraphs.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Unbranded form submission notification

→
Form submission notifications that have no reference to Webflow (e.g., notifications sent from “no-reply@webforms.io” instead of “no-reply@webflow.com”).

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Baseline

→
The baseline is the fixed invisible line that serves as the base for letters. It’s used as a measurement for line height and x-height.

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Behavioral targeting

→
Behavioral targeting is a marketing technique that leverages user data to deliver personalized ads to drive conversions.

Borders

→
The CSS border property delineates an HTML element.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Meta description

→
An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often display this in results pages (SERPs).

Field label

→
A field label is descriptive text that helps users understand what information to enter in an input field on a web form.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Webflow branding

→
A visible “Made in Webflow” badge displayed in the bottom right corner of Webflow sites. Webflow branding also appears in the site’s HTML. Learn more about Webflow branding.

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Constant

→
In coding, a constant is a fixed value that can’t change, no matter where it appears or what the program uses it for.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

HyperText Markup Language (HTML)

→
A standard markup language that web browsers use to display websites.

CRUD

→
CRUD stands for Create, Read, Update, and Delete — the four basic operations all software applications should perform.

Empty state

→
The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

Ancestor

→
Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Span text

→
The <span> tag is used to style inline-text.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Required field

→
You can set any Collection field as "Required," which means that a value must be added to that field in the Collection item before it can be published. The only Collection field that cannot be made required is the Switch field.

Total asset size

→
The total weight of your site's HTML, CSS, JS, and images.

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

Rich text field

→
A rich text field is an input tool for formatting or applying text styles, such as bold, colors, font sizes, italics, underline, and other visual modifications.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

Content network

→
A content network is a collection of websites where advertisers can pay to display digital ads.

Total Site Pages

→
The amount of pages your site currently has.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

Video field

→
Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Collection URL

→
The slug that represents the parent folder for your individual Collection item URLs. For example, if you created a Collection called “Blog posts,” the URL would be website.com/blog-posts, while a Collection item URL for a blog post called “Hello world” would be website.com/blog-posts/hello-world.

Accessibility tree

→
A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

Resource Description Framework (RDF)

→
The Resource Description Framework (RDF) is a standardized framework developed by the World Wide Web Consortium (W3C) that facilitates automated data exchange between web systems and applications.

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Right-side panel

→
The far right vertical panel in the Designer that houses the Style panel, Element settings panel, Style manager panel, and Interactions panel.

Color wheel

→
The color wheel shows several colors in a circle to represent primary, secondary, and tertiary colors and their relationships.

Optimizely

→
A web app that helps you measure how different site designs impact user behavior.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Interpolation

→
Interpolation is a mathematical process that estimates and creates new values based on known values and their relationship.

Combo class

→
Combining two or more classes into a single selector to target an element.

Form submission

→
When someone sends data through one of your site's forms.

Last published

→
The last time your site was published.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Div block

→
A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Reference field

→
A CMS field used in Collections. This powerful field allows you to link to other Collections within your website to populate fields in Collection lists and Collection pages.

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

File Transfer Protocol (FTP)

→
File Transfer Protocol (FTP) allows for the transfer of files between two parties over TCP/IP-based communication channels, such as the internet.

Save

→
The Designer automatically saves your progress every 10 seconds.

Sorting Collection lists

→
You can sort your Collection items in multiple ways — select the field from the Collection you wish to filter from, then select the ordering option.

Dynamic content

→
Content you create once, then publish in many different places across your website. As you update this content in the CMS, it automatically updates wherever it exists on your site, making it convenient to create and manage larger websites.

Editor toolbar

→
The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

SSL CDN

→
SSL CDN, or Secure Sockets Layer Content Delivery Network, is an option that allows you to serve your images over your own CDN service while using SSL.

Shared Workspace template

→
Shared Workspace templates are templates made from your own sites. They can help you create sites with similar layouts and increase your efficiency when designing. Your Workspace members will also have access to your shared Workspace template(s).

Image field

→
Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

Slider

→
A slider is an interactive design element for scrolling through images, videos, and other multimedia content.

Inheritance dropdown

→
A dropdown menu that displays all the selectors that affect a given element.

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Below the fold

→
Below the fold refers to the lower portion of a webpage that isn’t immediately visible to visitors upon loading until they scroll down.

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Email template

→
Email templates — or pre-designed HTML layouts — ensure consistent branding and visual aesthetic in marketing campaigns.

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Canvas

→
The <canvas> tag in HTML5 creates a container for dynamic graphics and image rendering on a webpage.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

X-Ray mode

→
A grayscale view of your site’s canvas that visually displays each element’s border, margin, and padding when hovered over.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

Redo

→
To move forward one step while making changes to a Webflow site.

Text link

→
A typography element that is used to link to other pages or sections of a webpage.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Pages panel

→
A panel in the left toolbar where you can add static pages and folders to your Webflow site. You can also manage and access Utility pages and Collection pages.

Dropdown

→
A dropdown, or dropdown menu, is a pre-built navigation element you can add to almost any part of a website.

Publish site

→
The act of updating your live site to reflect new design changes.

Key

→
A key, or web key, is a unique identifier that authorizes access to a webpage or service.

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

A/B testing

→
A/B testing compares two different versions of something — like a web page or campaign — to determine which performs better.

Content management system (CMS)

→
A content management system (CMS) is a tool for creating and managing a website and its content.

Network Address Translation (NAT)

→
NAT (Network Address Translation) is a technique that enables communication between devices with private internet protocol addresses and the public internet.

Top padding

→
The inside spacing between the top border of an element and the elements inside it.

Syntax error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

Twitter button

→
A Webflow element that embeds a Twitter Follow or Tweet button into your site.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Asynchronous

→
Asynchronous programming is an approach where programs simultaneously run multiple operations independently without waiting for previous tasks to complete.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

API

→
APIs, or Application Programming Interfaces, are common code protocols that let apps safely exchange data with other apps, software, and hardware.

Content-first design

→
A design approach that prioritizes content planning and production in the design process.

Compile

→
Compiling is the process of converting code from a high-level programming language into a low-level language that computers can understand.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Padding

→
Padding is a CSS property defining the space between an element's borders and its content.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more