CodeUtility
Facilitiamo la vita agli sviluppatori!
CSS and design

CSS Grid Generator

Design a CSS grid by drawing items on it, and get clean grid-template and grid-area code.

  • Runs in your browser
  • Instant results
  • Free, no sign-up
Loading the tool…

How to use the CSS Grid Generator

  1. Set the number of columns and rows, their sizes and the gaps.
  2. Drag across empty cells to add an item; click × to remove one.
  3. Copy the CSS and HTML.

Frequently asked questions

What does 1fr mean?

One fraction of the free space. Three 1fr columns share the width equally.

What does grid-area: 1 / 1 / 2 / 3 mean?

Row start / column start / row end / column end, counted in grid lines, so the item spans the first two columns of row 1.

Can items overlap?

Yes. CSS grid allows it; the item that comes later in the HTML is drawn on top.

Flexbox GeneratorBuild flexbox layouts visually: direction, wrap, justify, align and gap, plus grow, shrink, basis and order per item. Copy the CSS and HTML. CSS Gradient GeneratorCreate linear, radial and conic CSS gradients with multiple color stops and a live preview. Start from presets and copy the CSS. PX to REM ConverterConvert px to rem and rem to px with any root font size. Includes a table of common sizes and bulk conversion of whole CSS files.

Esercitati in Python con le sfide di codice

Risolvi problemi pratici direttamente in questo editor: esegui i test di esempio, invia la soluzione e ricevi una revisione AI del codice.

Tutte le sfide Python
Facile

Average of Three

Average three whole numbers.

Imparerai AritmeticaDivisione
BeginnerLearning-pathVariables
Python C++ C#
1 risolta
Vedi soluzioni (1)
Facile

Rectangle Perimeter

Compute the perimeter of a rectangle from its sides.

Imparerai AritmeticaValori di ritorno
BeginnerLearning-pathVariables
Python C++ C#
1 risolta
Vedi soluzioni (1)
Media

Una generazione di un algoritmo genetico

Genera la prossima generazione di stringhe di bit con selezione a torneo, crossover a un punto e mutazione.

Imparerai Algoritmi geneticiRicerca evolutiva
OptimizationSimulationai
Python C++ C#
0 risolte
Nessuna soluzione ancora
Facile

Bandito multi-braccio epsilon-greedy

Bilancia esplorazione e sfruttamento su un bandito multi-braccio con la selezione delle azioni epsilon-greedy.

Imparerai Esplorare o sfruttareBandit
Apprendimento per rinforzoaiapprendimento automatico
Python C++ C#
0 risolte
Nessuna soluzione ancora
Facile

Distribuzione degli stati di una catena di Markov

Propaga una distribuzione di probabilità attraverso la matrice di transizione di una catena di Markov per un certo numero di passi.

Imparerai Catene di MarkovProbabilità
Simulationaimath
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Iterazione dei valori

Calcola quanto vale ogni stato di un processo decisionale di Markov applicando ripetutamente l'aggiornamento di ottimalità di Bellman.

Imparerai Equazione di BellmanMDP
Apprendimento per rinforzoaiapprendimento automatico
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Aggiornamenti del Q-learning

Applica l'aggiornamento del Q-learning a un flusso di esperienze e guarda le ricompense risalire verso gli stati precedenti.

Imparerai Q-learningRicompense scontate
Apprendimento per rinforzoaiapprendimento automatico
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Potatura alfa-beta

Valuta un albero di gioco con minimax e potatura alfa-beta, e conta quante foglie la ricerca esamina davvero.

Imparerai Potatura alfa-betaRicerca nei giochi
RecursionTreesai
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Tris con minimax

Scegli la mossa perfetta a tris esplorando l'intero albero di gioco con minimax.

Imparerai MinimaxAlberi di gioco
Recursionai
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Ricerca A* su una griglia pesata

Trova il percorso più economico attraverso una griglia di costi del terreno con A*, l'algoritmo di ricerca dietro il pathfinding di giochi e robot.

Imparerai Ricerca A*Euristiche
GraphsGridsShortest-pathai
Python C++ C#
0 risolte
Nessuna soluzione ancora
Media

Campionamento con temperatura e top-k

Scegli il token successivo come un modello linguistico: tieni i k logit più alti, applica la temperatura e campiona.

Imparerai Generazione di testoCampionamento
aiapprendimento automatico
Python C++ C#
0 risolte
Nessuna soluzione ancora
Difficile

Self-attention multi-head

Proietta l'input in query, key e value, esegui l'attenzione in più head in parallelo e combinale.

Imparerai Attenzione multi-headProiezioni matriciali
aiapprendimento automatico
Python C++ C#
0 risolte
Nessuna soluzione ancora