Css Programming Tutorials, Guides & Best Practices

• Framework (Next.js, Vite, etc.)
• Tailwind CSS config
• Components directory (default: components)
• Alias for imports (optional)

npx shadcn-ui@latest add [component]

.container {
  display: grid;
  /* OR */
  display: inline-grid;

  /* Define columns */
  grid-template-columns: 100px 100px 100px;        /* Fixed width */
  grid-template-columns: 1fr 1fr 1fr;              /* Fractional units */
  grid-template-columns: repeat(3, 1fr);           /* Repeat syntax */
  grid-template-columns: minmax(100px, 1fr);       /* Responsive columns */
  grid-template-columns: auto 1fr auto;            /* Auto-sized columns */

  /* Define rows */
  grid-template-rows: 100px 100px;                 /* Fixed height */
  grid-template-rows: repeat(3, minmax(100px, auto)); /* Responsive rows */

  /* Define template areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";                        /* Named grid areas */

  /* Gaps */
  gap: 20px;                                       /* Both row and column gap */
  row-gap: 20px;                                   /* Row gap only */
  column-gap: 20px;                                /* Column gap only */

  /* Grid alignment */
  justify-items: start | end | center | stretch;   /* Horizontal alignment */
  align-items: start | end | center | stretch;     /* Vertical alignment */
  place-items: center center;                      /* Shorthand for both */

  /* Grid content alignment */
  justify-content: start | end | center | space-between | space-around;
  align-content: start | end | center | space-between | space-around;

  /* Auto-flow */
  grid-auto-flow: row | column | dense;
}

.item {
  /* Grid Area - Multiple ways to use it */
  grid-area: header;                              /* Named template area */
  grid-area: 1 / 1 / 2 / 3;                       /* row-start/column-start/row-end/column-end */
  grid-area: 2 / span 3;                          /* Start at row 2, span 3 columns */

  /* Individual grid-row/column properties */
  grid-column: 1 / 3;                             /* Start / end column */
  grid-column: span 2;                            /* Span multiple columns */
  grid-row: 1 / 3;                                /* Start / end row */

  /* Individual alignment */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center center;                      /* Shorthand for both */
}

/* Example usage of grid-area with template areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

قبل البدء، يُفضل أن يكون لديك معرفة بسيطة باللغات التالية:

• HTML: لهيكلة المحتوى.
• CSS: لتنسيق التصميم.
• JavaScript: لإضافة التفاعلات.

The clamp() function takes three values:

• Minimum Value: The smallest value the property can shrink to.
• Preferred Value: The value the property will normally aim for.
• Maximum Value: The largest value the property can grow to.

• Managing Layout Changes Across Screen Sizes
• Using Media Queries with CSS Variables

• Changing Variable Values Dynamically with JavaScript
• Creating Interactive UI Elements Based on CSS Variables