Blocks Monster

A collection of top-notch UI blocks

Free

3 Column Layout (25%/50%/25%)

A professionally crafted Gutenberg block design that enhances your website’s layout and user experience. Fully responsive, easy to customize, and built for performance.

Required Plugins

Blocks Monster

Copy to Clipboard

</p>
<div class="wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow">
<style type="text/css" id="bm-8pltn">.bm-8pltn { background: #050507;padding-top: 40px;padding-right: 40px;padding-bottom: 40px;padding-left: 40px; }
@media (max-width: 600px) { .bm-8pltn { padding-top: 20px;padding-bottom: 20px; } }</style>
<div class="bm-8pltn wp-block-bm-section">
<style type="text/css" id="bm-y1qnu">.bm-y1qnu { display: flex;flex-direction: row;align-items: center;justify-content: space-between;row-gap: 20px;column-gap: 20px;max-width: 1000px;margin-right: auto !important;margin-left: auto !important; }
@media (max-width: 600px) { .bm-y1qnu { display: flex;flex-direction: column; } }</style>
<div class="bm-y1qnu wp-block-bm-section">
<style type="text/css" id="bm-23afw">.bm-23afw { width: 25%;background: #19181d;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; }
@media (max-width: 782px) { .bm-23afw { width: 100%; } }
@media (max-width: 600px) { .bm-23afw { width: 100%; } }</style>
<div class="bm-23afw wp-block-bm-column">
<style type="text/css" id="bm-30soz">.bm-30soz { font-size:16px;color:#ffffff; }</style>
<h2 class="bm-30soz wp-block-bm-heading">Left Column (25%)</h2>
</div>
<style type="text/css" id="bm-uraer">.bm-uraer { width: 50%;background: #19181d;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; }
@media (max-width: 782px) { .bm-uraer { width: 100%; } }
@media (max-width: 600px) { .bm-uraer { width: 100%; } }</style>
<div class="bm-uraer wp-block-bm-column">
<style type="text/css" id="bm-fvfzw">.bm-fvfzw { font-size:16px;color:#ffffff; }</style>
<h2 class="bm-fvfzw wp-block-bm-heading">Center Column (50%)</h2>
</div>
<style type="text/css" id="bm-qowi1">.bm-qowi1 { width: 25%;background: #19181d;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; }
@media (max-width: 782px) { .bm-qowi1 { width: 100%; } }
@media (max-width: 600px) { .bm-qowi1 { width: 100%; } }</style>
<div class="bm-qowi1 wp-block-bm-column">
<style type="text/css" id="bm-geemw">.bm-geemw { font-size:16px;color:#ffffff; }</style>
<h2 class="bm-geemw wp-block-bm-heading">Right Column (25%)</h2>
</div>
</div>
</div>
</div>
<p>

3 Column Layout (25%/50%/25%)

You may also like: