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

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

Manage dynamic content with the Webflow CMS

Learn how to create, manage, and display dynamic content across your site using the Webflow CMS.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Web elements

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

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

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.

Display: grid

→
The display: grid CSS property defines a website element (such as a button or header) as a grid container.

Responsive design

→
Responsive web design (RWD) is a web development and design approach to create websites, applications, and user interfaces (UIs) that display and function effectively on any device or screen size.

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.

Workspace

→
A space to hold and access sites, members, settings, and integrations. All users start with a Workspace that can become collaborative when and as needed.

Webflow badge

→
A visible "Made in Webflow" badge displayed in the bottom right corner of Webflow sites on Starter plans.

Callback function

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

Parent folder

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

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.

Video

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

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

RSS

→
Really Simple Syndication (RSS) is a web format that automatically distributes frequently updated content to subscribers, eliminating the need for subscribers to check the website manually to stay up to date.

IP address

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

Array

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

Made in Webflow

→
Made in Webflow showcases Webflow sites made by individuals and teams.

Behavioral targeting

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

Save

→
The Designer automatically saves your progress every 10 seconds.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Form button

→
A form element that lets website visitors submit data to your form handler.

Element

→
Elements are individual HTML components that constitute a webpage’s structure and contents.

Selector

→
A selector identifies and selects specific HTML elements to apply CSS styles to.

Typography

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

Second-level domain (SLD)

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

Folder

→
A folder is a subdirectory of your site's root folder for organizing web pages.

Cipher suite

→
A cipher suite is a collection of encryption algorithms that work together to secure a network connection.

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.

Domain

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

Conditional

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

Export

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

Top padding

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

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Empty elements

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

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

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.

Date/Time field

→
A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

Form submission

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

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.

Utility pages

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

Folder settings

→
Allows you to manage your folders.

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

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.

Hit

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

Total Form Submissions

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

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.

Sitemap URL

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

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.

Backup

→
A backup is a copy of data stored in an alternate location, including hard drives, cloud servers, or network-attached storage (NAS) servers.

Height: auto

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

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.

Field label

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

Map

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

Span text

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

Webflow forum

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

Effects

→
A section in the Style panel that houses CSS properties for changing how an element appears, such as its opacity, outline, and box shadows.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

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).

Number field

→
Available in CMS Collections. It lets you insert an integer with or without decimals.

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.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Static page

→
A static page is a document with fixed content that makes up an individual web page on your site.

Inheritance

→
Inheritance describes a principle where child elements adopt the style properties of parent elements.

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.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

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.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

JPEG

→
Short for Joint Photographic Experts Group, JPEG is a file format that uses lossy compression to maintain manageable file sizes without compromising image quality.

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

Wrapper

→
A wrapper is a programming language function for encapsulating and organizing elements within a well-defined interface.

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.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

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.

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

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.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

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.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

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.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Beacon

→
A beacon — also called a web beacon or web bug — is an HTML-embedded object that tracks user behavior on a web page.

Automagically

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

Minified code

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

UI state

→
The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

Interpolation

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

Bottom margin

→
The spacing between the bottom border of an element and the element(s) below it.

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.

Image

→
A Webflow element that displays graphical files on your website.

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.

Breadcrumb

→
A breadcrumb, or breadcrumb trail, is a navigational element representing a user’s current location within a website's hierarchical structure.

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.

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Minimized CSS

→
A method of lowering the file size of your stylesheet(s) by removing all white space from your CSS files.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more