AI Verified

Name

CSS Grid Aid

About

This can be used for any WordPress Builder to aid working with CSS Grids.

Language

PHP

Rating

Voted: 6 by 6 user(s)

Codevault

WebSquadron

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.1

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

22/05/2024

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

AI Bot Comments:

Found 0 vulnerabilities

CSS Grid Aid

 
                    
1/**
2 * CSS Grid Helper for Elementor
3 *
4 * This plugin, created by Mark Harris, is designed for use with the Elementor page builder
5 * in WordPress. It allows you to easily generate CSS code for defining grid layouts
6 * within Elementor using CSS Grid. You can customize the number of rows and columns
7 * and add multiple block sets with specific grid positions.
8 *
9 * Instructions:
10 * 1. Enter the total number of rows and columns in the grid.
11 * 2. Add block sets with specific grid positions (start and end rows/columns).
12 * 3. Click "Generate Block CSS" to generate the CSS code.
13 *
14 * The generated CSS code will be displayed below and can be used in your Elementor custom CSS settings.
15 *
16 * Author: Mark Harris
17 * Version: 1.0
18 *
19 * @package CSS_Grid_Helper
20 * @version 1.0
21 */
22 
23// Add a new menu item in the WordPress admin for the CSS Grid Helper
24function css_grid_helper_add_admin_page()
25{
26 add_menu_page(
27 "CSS Grid Helper", // Page title
28 "CSS Grid Helper", // Menu title
29 "manage_options", // Capability
30 "css-grid-helper", // Menu slug
31 "css_grid_helper_admin_page", // Function to display the page
32 "dashicons-layout", // Icon
33 110 // Position
34 );
35}
36 
37// Display the admin page content
38function css_grid_helper_admin_page()
39{
40 ?>
41 <div class="wrap">
42 <h1>CSS Grid Helper</h1>
43 <form id="css-grid-helper-form">
44 <h2>Grid Size</h2>
45 <div class="input-group">
46 <label for="grid-rows">Total Rows:</label>
47 <input type="number" id="grid-rows" name="grid_rows" min="1" value="4">
48 </div>
49 
50 <div class="input-group">
51 <label for="grid-columns">Total Columns:</label>
52 <input type="number" id="grid-columns" name="grid_columns" min="1" value="4">
53 </div>
54 
55 <h2>Block Position and Span</h2>
56 <div class="block-set">
57 <h3>Block Set 1</h3>
58 <div class="input-group">
59 <label for="block-start-row">Start Row:</label>
60 <input type="number" class="block-start-row" name="block_start_row" min="1" value="1">
61 </div>
62 
63 <div class="input-group">
64 <label for="block-end-row">End Row:</label>
65 <input type="number" class="block-end-row" name="block_end_row" min="1" value="2">
66 </div>
67 
68 <div class="input-group">
69 <label for="block-start-column">Start Column:</label>
70 <input type="number" class="block-start-column" name="block_start_column" min="1" value="1">
71 </div>
72 
73 <div class="input-group">
74 <label for="block-end-column">End Column:</label>
75 <input type="number" class="block-end-column" name="block_end_column" min="1" value="2">
76 </div>
77 </div>
78 
79 <button id="add-block-set" type="button" class="button button-secondary">Add Block Set</button>
80 <input type="submit" class="button button-primary" value="Generate Block CSS">
81 </form>
82 
83 <h2>Generated Block CSS</h2>
84 <textarea id="generated-css" rows="5" readonly></textarea>
85 
86 <h2>Grid Preview</h2>
87 <div id="grid-preview" class="grid-container">
88 <!-- Grid items for visualization will be added here -->
89 </div>
90 </div>
91 
92 <!-- JavaScript Section -->
93 <script type="text/javascript">
94 jQuery(document).ready(function($) {
95 var blockSetColors = ['#FFA07A', '#20B2AA', '#778899', '#9370DB', '#3CB371', '#FFD700',
96 '#FF6347', '#4682B4', '#DA70D6', '#32CD32', '#FF4500', '#6A5ACD'];
97 
98 var totalRows = parseInt($('#grid-rows').val(), 10);
99 var totalColumns = parseInt($('#grid-columns').val(), 10);
100 
101 function updateGridContainerStyle() {
102 var gridContainer = $('.grid-container');
103 gridContainer.css({
104 'grid-template-columns': 'repeat(' + totalColumns + ', 50px)'
105 });
106 }
107 
108 function validateBlockSetInput() {
109 $('.block-set').each(function() {
110 $(this).find('.block-start-row, .block-end-row').attr('max', totalRows);
111 $(this).find('.block-start-column, .block-end-column').attr('max', totalColumns);
112 });
113 }
114 
115 function updateGridPreview() {
116 var gridPreview = $('#grid-preview');
117 gridPreview.empty();
118 
119 for (let row = 1; row <= totalRows; row++) {
120 for (let col = 1; col <= totalColumns; col++) {
121 gridPreview.append($('<div class="grid-item">R' + row + ' C' + col + '</div>'));
122 }
123 }
124 
125 var css = '';
126 $('.block-set').each(function(index) {
127 var startRow = parseInt($(this).find('.block-start-row').val(), 10);
128 var endRow = parseInt($(this).find('.block-end-row').val(), 10);
129 var startColumn = parseInt($(this).find('.block-start-column').val(), 10);
130 var endColumn = parseInt($(this).find('.block-end-column').val(), 10);
131 
132 var blockColor = blockSetColors[index % blockSetColors.length];
133 
134 var blockCss =
135 "/* Block " + (index + 1) + " */\n" +
136 "selector {\n" + // Replace "selector" with your custom selector
137 " grid-row: " + startRow + "/" + (endRow + 1) + ";\n" +
138 " grid-column: " + startColumn + "/" + (endColumn + 1) + ";\n" +
139 "}\n";
140 css += blockCss;
141 
142 $('#grid-preview .grid-item').each(function() {
143 var itemRow = parseInt($(this).text().match(/R(\d+)/)[1], 10);
144 var itemCol = parseInt($(this).text().match(/C(\d+)/)[1], 10);
145 
146 if (itemRow >= startRow && itemRow <= endRow && itemCol >= startColumn && itemCol <= endColumn) {
147 $(this).css('background-color', blockColor);
148 }
149 });
150 });
151 
152 $('#generated-css').val(css);
153 updateGridContainerStyle();
154 }
155 
156 function updateBlockSetLabels() {
157 $('.block-set').each(function(index) {
158 var blockColor = blockSetColors[index % blockSetColors.length];
159 $(this).find('h3').html('Block Set ' + (index + 1) + ' <span class="color-indicator" style="background-color: ' + blockColor + ';"></span>');
160 });
161 }
162 
163 function addBlockSet() {
164 var blockSet = $('.block-set').first().clone();
165 blockSet.find('input').val('');
166 $('.block-set').last().after(blockSet);
167 
168 updateBlockSetLabels();
169 updateGridPreview();
170 validateBlockSetInput();
171 }
172 
173 $('#add-block-set').click(function() {
174 addBlockSet();
175 });
176 
177 $('#grid-rows, #grid-columns').change(function() {
178 totalRows = parseInt($('#grid-rows').val(), 10);
179 totalColumns = parseInt($('#grid-columns').val(), 10);
180 
181 validateBlockSetInput();
182 updateGridPreview();
183 });
184 
185 $('#css-grid-helper-form').submit(function(event) {
186 event.preventDefault();
187 updateGridPreview();
188 });
189 
190 updateBlockSetLabels();
191 updateGridPreview();
192 validateBlockSetInput();
193 });
194</script>
195 
196 
197 <!-- CSS Section -->
198 <style type="text/css">
199 .wrap {
200 margin: 20px;
201 }
202 .input-group {
203 margin-bottom: 15px;
204 }
205 label {
206 display: block;
207 margin-bottom: 5px;
208 }
209 input[type="number"] {
210 width: 50px;
211 }
212 .button-secondary {
213 margin-left: 10px;
214 }
215 #generated-css {
216 width: 100%;
217 font-family: monospace;
218 background-color: #f7f7f7;
219 border: 1px solid #ccc;
220 padding: 10px;
221 }
222 .grid-container {
223 margin-top: 20px;
224 max-width: 100%;
225 display: grid;
226 grid-template-columns: repeat(4, 50px);
227 grid-gap: 4px;
228 background-color: #fff;
229 padding: 4px;
230 }
231 .grid-container .grid-item {
232 background-color: rgba(255, 255, 255, 0.8);
233 border: 1px solid rgba(0, 0, 0, 0.8);
234 padding: 8px;
235 font-size: 14px;
236 text-align: center;
237 overflow: hidden;
238 transition: background-color 0.3s;
239 }
240 .block-set {
241 background-color: #f0f0f0;
242 border: 1px solid #ccc;
243 padding: 10px;
244 margin-top: 20px;
245 }
246 .block-set h3 {
247 margin: 0;
248 padding: 0;
249 font-size: 16px;
250 }
251 .color-indicator {
252 display: inline-block;
253 width: 15px;
254 height: 15px;
255 border-radius: 50%;
256 margin-left: 10px;
257 vertical-align: middle;
258 }
259 </style>
260 <?php
261}
262 
263add_action("admin_menu", "css_grid_helper_add_admin_page");

6

Related Snippets

Please see some snippets below related to this snippet..

Elementor

Unverified

0

Elementor Anchor Link Scroll Offset

Added: 3 months ago

Last Updated: 3 months ago

Offset anchor menu links from the top of the page.

Elementor

AI Verified

0

Reorder Columns in mobile view

Added: 1 year ago

Last Updated: 1 year ago

By using This snippet you can see new option in mobile view to reorder the column the way you need.

Elementor

Unverified

0

Elementor Pro Form Checkboxes

Added: 5 months ago

Last Updated: 5 months ago

Style Elementor Pro Form Checkboxes with CSS

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

Performance

AI Verified

31

Remove Unused Javascript

Added: 1 year ago

Last Updated: 1 week ago

Remove Unused Javascript - and improve your Page Speed Insight Score

WooCommerce

Pro Verified

9

Deactivate some WooCommerce Checkout Fields

Added: 1 year ago

Last Updated: 7 months ago

Deactivate some WooCommerce Checkout Fields from showing

Elementor

AI Verified

6

CSS Grid Aid

Added: 6 months ago

Last Updated: 3 weeks ago

This can be used for any WordPress Builder to aid working with CSS Grids.