# post-carousel/4.0.8/src/blocks/post-grid-six/render.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.8. 52 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/post-grid-six/render.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/blocks/post-grid-six/render.js
- Modified: 2026-09-02T10:51:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/post-grid-six/render.js#L10-L20`.

```javascript
import { jsonParse, toggleEqualHeight } from "../shared/helpFn";
import { Fragment, useEffect, useRef } from "@wordpress/element";
import LoopContent from "./loopContent";
import { breakpoint } from "../../controls/controls";

const Render = ({ attributes, posts }) => {
	const {
		uniqueId,
		postGridLayout,
		equalHeightEnable,
		catTabCategoryPosition,
		// gridSixMasonryEnable,
	} = attributes;

	const deviceType = breakpoint();
	const containerRef = useRef(null);

	useEffect(() => {
		toggleEqualHeight(uniqueId, equalHeightEnable);
	}, [equalHeightEnable, uniqueId, []]);

	return (
		<div className={`sp-smart-show-pro grid-six-container sp-cat-position-${catTabCategoryPosition}`}>
			{"Mobile" !== deviceType && (
				<div
					className={`sp-smart-post-grid-six-large-contents ${postGridLayout} ${
						"grid-six-layout-four" === postGridLayout ? "sp-smart-post-background-layout" : ""
					}`}
				>
					<LoopContent posts={posts} attributes={attributes} containerRef={containerRef} />
				</div>
			)}
			<div
				className={`sp-smart-post-grid-six-dynamic-contents ${postGridLayout}
				${"grid-six-layout-one" === postGridLayout ? "sp-smart-post-background-layout" : ""}`}
			>
				<LoopContent
					Masonry={false}
					ResponsiveMasonry={Fragment}
					bottomStyle={true}
					layoutStyle="grid-six-layout-one"
					posts={posts}
					attributes={attributes}
					containerRef={containerRef}
				/>
			</div>
		</div>
	);
};

export default Render;

```