Mockrithm Logo
Mockrithm®
Awwwards Class Sandbox

Flex. Grid.
Master Layouts.

Troubleshoot complex fluid viewports, center grid divs, and configure GPU-accelerated keyframe layouts under strict execution deadlines.

Main Platform
Next Level Assessment

Duplex Voice-Activated AI Mock Interviews

Code sandbox is only half the battle. Practice duplex voice interviews with our AI interviewer model. Receive real-time assessment scores, detailed critiques on articulation, and tailor-made development checklists.

Practice Now
10 Modules Course Syllabus

Interactive Landing Sandboxes

Select a topic below to inspect the curriculum lessons and practice code playground templates.

css module

CSS Flexbox & Grid Master

Architect scalable styling layouts and responsive design grids under execution pressure.

  • Create fluid multi-dimensional grids using auto-fit, minmax, and clamp units.
  • Implement GPU-accelerated transition keyframes to guarantee 60fps micro-interactions.
  • Manage modular token scales with CSS variable definitions and responsive viewports.
playgrounds/sandbox.css
Active Playground
/* Responsive Grid Layout & Animation */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
}