<div class="matrix-wrapper">
<div class="matrix-grid">
<!-- Sticky Header Row -->
<div class="matrix-header empty-cell"></div>
<div class="matrix-header">
<h3>Basic</h3>
<p>$9 / month</p>
</div>
<div class="matrix-header pro-header">
<div class="popular-badge">Most Popular</div>
<h3>Pro</h3>
<p>$29 / month</p>
</div>
<div class="matrix-header">
<h3>Enterprise</h3>
<p>$99 / month</p>
</div>
<!-- Row 1 -->
<div class="feature-name">Projects</div>
<div class="feature-value">5</div>
<div class="feature-value pro-value">Unlimited</div>
<div class="feature-value">Unlimited</div>
<!-- Row 2 -->
<div class="feature-name">Cloud Storage</div>
<div class="feature-value">10 GB</div>
<div class="feature-value pro-value">100 GB</div>
<div class="feature-value">1 TB</div>
<!-- Row 3 -->
<div class="feature-name">API Access</div>
<div class="feature-value text-muted">-</div>
<div class="feature-value pro-value check-mark">✓</div>
<div class="feature-value check-mark">✓</div>
<!-- Row 4 -->
<div class="feature-name">24/7 Support</div>
<div class="feature-value text-muted">-</div>
<div class="feature-value pro-value text-muted">-</div>
<div class="feature-value check-mark">✓</div>
<!-- CTA Row -->
<div class="feature-name empty-cell"></div>
<div class="feature-value"><button class="btn-basic">Start Basic</button></div>
<div class="feature-value pro-value"><button class="btn-pro">Start Pro</button></div>
<div class="feature-value"><button class="btn-basic">Contact Sales</button></div>
</div>
</div>
Back to Snippets
Advanced SaaS Feature Matrix CSS
Compare pricing plans using an advanced feature matrix layout. We utilized CSS Grid and position sticky to create a fully responsive, incredibly clean comparison table that highlights your premium tier perfectly.
112