University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
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

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

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.

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.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Other glossary terms

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

CRUD

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

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.

Web Accessibility Initiative (WAI)

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

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

Utility pages

→
Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Bad neighborhood

→
Bad neighborhoods are groups of websites that search engines have downgraded because they violate search engine guidelines.

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.

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Left toolbar

→
The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

Right padding

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

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Hit

→
A hit is a request to a web server from a browser for a specific resource.

Headless CMS

→
A headless content management system (CMS) separates the front-end presentation layer from the back-end management layer, allowing for more flexible content delivery.

Dashboard

→
From your Dashboard, you can access, create, and manage all your sites.

Pseudocode

→
Pseudocode is a simplified, informal representation of programming code that outlines a program’s structure and logic without strict syntax.

Webflow forum

→
The place to go when you need help with your site's design, custom code, etc. Visit the forum.

Deep copy

→
In programming, a deep copy is a replica of an object that doesn’t share the same references as the original. That way, if you make changes to the duplicate, the original stays the same.

ID selectors

→
You can assign element IDs from the Element settings panel in the Designer. ID selectors are useful for HTML anchors, linking to page sections, or for custom code.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Head code

→
Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

Graphical User Interface (GUI)

→
A Graphical User Interface (GUI) is a visual medium that enables visual interaction with software applications or electronic devices through elements like icons, buttons, and menus.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

CMS section

→
A section in the Add panel that contains elements associated with the CMS.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Webflow Editor

→
Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

SCA and PSD2 Regulations

→
Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019. Read more about how to make your ecommerce store compliant in our Payment gateway article.

Display: block

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

Compile

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

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.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Google site verification meta tag

→
Adding a Google site verification meta tag to your website's HTML code allows Google to verify that you own the site.

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

CSS Filters

→
CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS).

Font weight

→
Font weight refers to the thickness or density of a typeface’s strokes.

End user

→
An end user is an individual or group who directly interacts with a particular product, service, or user interface (UI), such as a website or application.

Export

→
A downloadable ZIP file that contains your Webflow site's HTML, CSS, JS, and image files.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Embed component

→
A Webflow component you can use to embed HTML to display external content, plugins, or applications.

Left To Right (LTR)

→
Left To Right (LTR) describes a text layout that starts from the left and proceeds to the right.

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

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.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Style Manager

→
The third tab in the right-side panel where you can rename element classes, preview your class and tag styles, search for classes and tags, and delete any classes that aren’t in use.

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

Text link

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

Mobile (portrait) breakpoint

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

Height

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

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Array

→
An array is an ordered, random-access collection of data. This data can be either primitive or object, depending on the coding language.

Layout section

→
A tab in the Add panel that houses prebuilt layouts for your Webflow site.

SVG (Scalable Vector Graphics)

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

Navigator

→
A navigator, or a navigator window or panel, is a graphical user interface (GUI) that provides an overview of a website's structure and layout.

Video

→
A Webflow element that displays externally hosted videos such as YouTube and Vimeo.

Parent

→
The element directly above in the hierarchy tree.

Inheritance dropdown

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

Comparison shopping engine

→
A comparison shopping engine (CSE) is a search engine that compares ecommerce pricing, shipping costs, and customer reviews.

Second-level domain (SLD)

→
A second-level domain (SLD) is the part of a domain name that precedes a top-level domain (TLD).

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.

GIF

→
A GIF (Graphics Interchange Format) is a digital image format that uses multiple frames of an image or soundless video to create a short, looping animation.

Maximum height (max height)

→
The “max-height” CSS property defines an element’s maximum height.

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.

Map

→
A Webflow element that embeds an interactive Google Map in your site.

Domain

→
A domain, or domain name, is the unique address that directs to a website on the internet.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Cloneable site

→
Cloneable sites are open source (made available under the CC0 (“no rights reserved”) license). When you enable cloning, you allow any user to copy, modify, and use any part of your site for personal or commercial purposes.Sites with cloning turned off do not give others access to copy your site or open it in the Designer.

Callback function

→
A callback function is passed as an argument to another function and executed upon completing the latter’s task.

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

PNG (Portable Network Graphics)

→
PNG, short for Portable Network Graphics, is a lossless image format known for its transparency support and quality retention after compression.

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

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.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Folder settings

→
Allows you to manage your folders.

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

HyperText Markup Language (HTML)

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

Flex-justify

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

DHTML

→
DHTML, or Dynamic HTML, is a web-development technique combining HTML, CSS, and JavaScript to create dynamic, interactive web pages and complex web applications.

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.

Front-end

→
The front-end refers to the visual and interactive part of a website or application that users directly interact with.

Target

→
The currently selected element.

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.

Element settings panel

→
The second panel on the right side of the Designer. Here, you can change element-specific settings such as the element ID, Custom attributes, Search index settings, Editor settings, etc. You can learn more about the element settings for a specific element by searching for the element’s name on Webflow University.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Desktop breakpoint

→
A breakpoint, or media query, is the width at which a website’s design and layout adjust to fit screens of different sizes. When designing in Webflow, breakpoints for smaller devices inherit styles from the base — or desktop — breakpoint by default.

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.

Top of the funnel

→
Top of the funnel (TOFU) refers to the initial marketing funnel stage where potential customers become aware of a brand’s existence.

Text block

→
A typography element that is used when no other element is specifically suitable.

Total Site Pages

→
The amount of pages your site currently has.

Gutters

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

Text area

→
A form element that allows site visitors to enter multi-line data.

Behavioral targeting

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

Asynchronous

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

Inline style

→
Inline style applies CSS to an individual HTML element using the "style" attribute within the HTML tag.

Homepage

→
The page people see when they visit your site's root domain. Read more about the homepage.

Encapsulation

→
Encapsulation is an object-oriented programming (OOP) process that combines functions and the data they manipulate into a single entity.

Typography section

→
A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

Document type definition (DTD)

→
A document type definition (DTD) defines the structure, validity, and attributes of standard generalized markup language (SGML) documents, such as GML, HTML, and XML.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more