Edit file File name : grid-container.php Content :<?php namespace Elementor; use Elementor\Plugin; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } class Group_Control_Grid_Container extends Group_Control_Base { protected static $fields; public static function get_type() { return 'grid-container'; } protected function init_fields() { $icon_start = is_rtl() ? 'end' : 'start'; $icon_end = is_rtl() ? 'start' : 'end'; $fields = []; $fields['items_grid'] = [ 'type' => Controls_Manager::HEADING, 'label' => esc_html__( 'Items', 'elementor' ), 'separator' => 'before', ]; $fields['outline'] = [ 'label' => esc_html__( 'Grid Outline', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'elementor' ), 'label_off' => esc_html__( 'Hide', 'elementor' ), 'default' => 'yes', 'editor_available' => true, ]; $responsive_unit_defaults = $this->get_responsive_unit_defaults(); $fields['columns_grid'] = [ 'label' => esc_html__( 'Columns', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'fr' => [ 'min' => 1, 'max' => 12, 'step' => 1, ], ], 'size_units' => [ 'fr', 'custom' ], 'unit_selectors_dictionary' => [ 'custom' => '--e-con-grid-template-columns: {{SIZE}}', ], 'default' => [ 'unit' => 'fr', 'size' => 3, ], 'mobile_default' => [ 'unit' => 'fr', 'size' => 1, ], 'selectors' => [ '{{SELECTOR}}' => '--e-con-grid-template-columns: repeat({{SIZE}}, 1fr)', ], 'responsive' => true, 'editor_available' => true, ] + $responsive_unit_defaults; $fields['rows_grid'] = [ 'label' => esc_html__( 'Rows', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'fr' => [ 'min' => 1, 'max' => 12, 'step' => 1, ], ], 'size_units' => [ 'fr', 'custom' ], 'unit_selectors_dictionary' => [ 'custom' => '--e-con-grid-template-rows: {{SIZE}}', ], 'default' => [ 'unit' => 'fr', 'size' => 2, ], 'selectors' => [ '{{SELECTOR}}' => '--e-con-grid-template-rows: repeat({{SIZE}}, 1fr)', ], 'responsive' => true, 'editor_available' => true, ] + $responsive_unit_defaults; $fields['gaps'] = [ 'label' => esc_html__( 'Gaps', 'elementor' ), 'type' => Controls_Manager::GAPS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'unit' => 'px', ], 'separator' => 'before', 'selectors' => [ '{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}}', ], 'responsive' => true, 'validators' => [ 'Number' => [ 'min' => 0, ], ], ]; $fields['auto_flow'] = [ 'label' => esc_html__( 'Auto Flow', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'row' => esc_html__( 'Row', 'elementor' ), 'column' => esc_html__( 'Column', 'elementor' ), ], 'default' => 'row', 'separator' => 'before', 'selectors' => [ '{{SELECTOR}}' => '--grid-auto-flow: {{VALUE}}', ], 'responsive' => true, 'editor_available' => true, ] + $this->get_responsive_autoflow_defaults(); $fields['justify_items'] = [ 'label' => esc_html__( 'Justify Items', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor' ), 'icon' => 'eicon-align-' . $icon_start . '-h', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor' ), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor' ), 'icon' => 'eicon-align-' . $icon_end . '-h', ], 'stretch' => [ 'title' => esc_html__( 'Stretch', 'elementor' ), 'icon' => 'eicon-align-stretch-h', ], ], 'default' => '', 'selectors' => [ '{{SELECTOR}}' => '--justify-items: {{VALUE}};', ], 'responsive' => true, ]; $fields['align_items'] = [ 'label' => esc_html__( 'Align Items', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor' ), 'icon' => 'eicon-align-start-v', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor' ), 'icon' => 'eicon-align-center-v', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor' ), 'icon' => 'eicon-align-end-v', ], 'stretch' => [ 'title' => esc_html__( 'Stretch', 'elementor' ), 'icon' => 'eicon-align-stretch-v', ], ], 'selectors' => [ '{{SELECTOR}}' => '--align-items: {{VALUE}};', ], 'responsive' => true, ]; $fields['justify_content'] = [ 'label' => esc_html__( 'Justify Content', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => true, 'default' => '', 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor' ), 'icon' => 'eicon-justify-start-h', ], 'center' => [ 'title' => esc_html__( 'Middle', 'elementor' ), 'icon' => 'eicon-justify-center-h', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor' ), 'icon' => 'eicon-justify-end-h', ], 'space-between' => [ 'title' => esc_html__( 'Space Between', 'elementor' ), 'icon' => 'eicon-justify-space-between-h', ], 'space-around' => [ 'title' => esc_html__( 'Space Around', 'elementor' ), 'icon' => 'eicon-justify-space-around-h', ], 'space-evenly' => [ 'title' => esc_html__( 'Space Evenly', 'elementor' ), 'icon' => 'eicon-justify-space-evenly-h', ], ], 'selectors' => [ '{{SELECTOR}}' => '--grid-justify-content: {{VALUE}};', ], 'condition' => [ 'columns_grid[unit]' => 'custom', ], 'responsive' => true, ]; $fields['align_content'] = [ 'label' => esc_html__( 'Align Content', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => true, 'default' => '', 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor' ), 'icon' => 'eicon-justify-start-v', ], 'center' => [ 'title' => esc_html__( 'Middle', 'elementor' ), 'icon' => 'eicon-justify-center-v', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor' ), 'icon' => 'eicon-justify-end-v', ], 'space-between' => [ 'title' => esc_html__( 'Space Between', 'elementor' ), 'icon' => 'eicon-justify-space-between-v', ], 'space-around' => [ 'title' => esc_html__( 'Space Around', 'elementor' ), 'icon' => 'eicon-justify-space-around-v', ], 'space-evenly' => [ 'title' => esc_html__( 'Space Evenly', 'elementor' ), 'icon' => 'eicon-justify-space-evenly-v', ], ], 'selectors' => [ '{{SELECTOR}}' => '--grid-align-content: {{VALUE}};', ], 'condition' => [ 'rows_grid[unit]' => 'custom', ], 'responsive' => true, ]; // Only use the auto flow prefix class inside the editor. $auto_flow_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : []; $fields['_is_row'] = array_merge( $auto_flow_prefix_class, [ 'type' => Controls_Manager::HIDDEN, 'default' => 'row', 'condition' => [ 'auto_flow' => [ 'row', ], ], ] ); $fields['_is_column'] = array_merge( $auto_flow_prefix_class, [ 'type' => Controls_Manager::HIDDEN, 'default' => 'column', 'condition' => [ 'auto_flow' => [ 'column', ], ], ] ); return $fields; } protected function get_responsive_unit_defaults() { $responsive_unit_defaults = []; $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) { $responsive_unit_defaults[ $breakpoint_name . '_default' ] = [ 'unit' => 'fr', ]; } return $responsive_unit_defaults; } protected function get_responsive_autoflow_defaults() { $responsive_autoflow_defaults = []; $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) { $responsive_autoflow_defaults[ $breakpoint_name . '_default' ] = 'row'; } return $responsive_autoflow_defaults; } protected function get_default_options() { return [ 'popover' => false, ]; } } Save