1. Home
  2. Features
  3. Web Page Elements
  4. Grid Repeater Element
  5. Columns And Rows Properties

How to modify the Columns and Rows for the Grid Repeater element

The Property Panel allows you to modify Element Properties. For example, you can change the Columns and Rows in one place for the Grid Repeater. To change the Columns and Rows, go to the Property Panels, and drag the corresponding sliders to change the property values.
Learn more

Browse By Feature Categories

Web Page Elements
Supported Systems
Visual Page Editor
Design Elements
Media Libraries
Element Properties
Responsive
Animation Effects
Theme Settings
Contact Form
Header & Footer
Blog
E-Commerce
SEO
Custom Code
Application Features
Site & Page Properties
WordPress Widgets

Everything You Need To Create Your Free Website

Use our Website Builder to design and create websites without coding. Drag and drop anything you want, to any place you want it. The Website Creator automatically adapts your website for mobile to make it responsive. Choose from more than 15,000 customisable website templates.

Download for Windows Download for Mac

Related Features

Grid Repeater To Carousel

Carousel Sliders are very popular in modern web design, and usually, Carousel Items have the same layout and item sets. In Nicepage, you can easily convert any Grid Repeater into a Carousel by clicking the switcher option in the Property Panel.
Add Rows To Grid Repeater

Similar to adding Columns, you can increase and decrease the number of Rows by clicking the blue Plus icon at the bottom of the Grid Repeater. After you see the drop-down list, you can select the number of required rows. You can choose both incrementing and decrementing numbers.
Multi-Selection To Grid Repeater

You can convert multiply selected Elements to a Grid Repeater. It speeds up the development of Blocks like Features, Team, Testimonials, etc. Select multiple Elements, then click on the blue Plus icon on the left border. Next, select the Grid Repeater layout.

Grid Repeater Item Colors

Using the Grid Repeater Element, you can apply different colors to its Items and contained Elements. For that, go to the Property Panel and switch All Items to Item in the "Apply Style To" section. Then set the Colors required for your web design idea
Add Columns To Grid Repeater

You can easily change the number of Columns for the Grid Repeater used in a Block. Click on the blue Plus icon at the right side of the Grid Repeater, then select the number of columns from the drop-down list. You can choose both incrementing and decrementing numbers.
Box Hover Animation for Grid Repeater Items

Similar to the Group Element, you can animate Grid Repeater Items on Group (Item) Hover. At that, you can also Add the Hover Animation Effect to Items, and they will work together. Go to the Property Panel, down to the Animation On section, set both Hover, and Group Hover Animation Effects if needed.
Grid Repeater Item Gap

Using the Item Gap Property in the Property Panel, you can change the distance between Grid Repeater Elements. Select the Grid Repeater, go to the Property Panel, find the Item Gap property, and drag its slider to change the distance between the Grid Repeater Items.

Free Templates with Grid Repeater Element

Get started with our best templates, great for any business. Create and customize them with our powerful and free website builder with no code. All templates are mobile-friendly and look excellent on any device.

How To Modify The Rows And Columns Properties For Grid Repeater Element

Our page builder uses the Grid system that allows the creation of a responsive design for the Grid layout on your page using the best practices of the Grids. Adjust the Grid layout web design on your web page using rows and columns. In our Property Panel, you can use smooth sliders to regulate the number of rows and columns, quickly adding or removing them. Using the Item Gap slider, you can customize the grid layout space between columns and rows so that the one column and row would be at an equivalent distance from one another. You can build your web design without a drag and drop editor or different types of grids using simple yet effective best practices.

Web designers usually wonder how to create a responsive grid and build grid systems that laconically combine the most important content of text and images? Using main types of grids like a modular grid or hierarchical grid, you can integrate more than 12 columns per page by changing their positioning in the grid system. The modular grid has a strict space between the gutters, but this plays as a plus for the responsive design in the content area. Hierarchical grids provide a more free website design where text and images are not always a part of the same block but create an overall complete structure.

For the 12 columns maximum, the most important thing is to manage the overall space between columns and column width within the 12-column grid. Our landing page builder will answer the question of how to create unique types of grids similar to a modular grid or hierarchical grid. Our page builder will help to customize the column width in your column grid and improve the user experience on different devices and screen sizes. A good user experience will prevent users from clicking the skip to content button, especially how to build a page in the 12 column grid.

Company
Product
Themes & Templates
Nicepage
Web Design