Grid

Define columns and rows. Check css because there are different
Items wrap in columns / rows
Columns: grid-template-columns: 100px 50px;
Columns: grid-template-columns: [nombreaelegir]100px 50px; - Se puede poner cualquier nombre entre corchetes y el valor al lado
Rows: grid-template-rows: 50px 100px;
Columns and Rows: grid-template: 50px 100px / 100px 50px;
grid-auto-rows: auto (by default). 100px 200px; - If set to 100px, all new rows added not defined, will be 100px. If there are two values, it will alternate
grid-auto-columns: auto (by default). 100px 200px; - If set to 100px, all new columns added not defined, will be 100px. If there are two values, it will alternate
grid-auto-flow: row(default) . Can be changed to column
Grid Template areas. Define names for columns and rows. And then to elements, set grid-area: with the name set previously above
grid-colum-start and grid-column-end. grid-column: 1/3. NO grid-template-areas necessary, just specify the columns and rows. the number 3 says it will end at the end of 2, so 3 will be available
grid-row: 1/3 same as above; grid-row: span 2 (takes two spaces)
All the space. Use -1. grid-column: 1 / -1; The negative is starting from the end and count backwards. You could also use -2, -3 if needed/Desired
grid-auto-flow: row, column o dense;

fr. Fractional. Distributes space in fractions / ratios
grid-columns: 1fr 3fr 2fr;
grid-template-columns: 50px repeat(2, 1fr) 50px;
grid-template-rows: minmax(50px, auto) 100px; Minimum of x and maximum of the content. Auto makes to fill the space needed to fit the text/content
gaps. row-gap. column-gap. gap:15px;

justify-content: center, end start. Aling the the content of the parent. Horizontal alignment of all elements in the grid. Si el contenido no ocupa todo el ancho
align-content: center, start, end. Align grid. Works only when there's height in the parent container and more space than the content. Vertical alignment. Si el contenido no ocupa todo el alto
Align-items: stretch, start, end, center. Vertical position in the grid cell
justify-items: stretch, start, end, center. Horizontal positions in the cell
justify-self: stretch, start, end, center. Vertical position in the grid cell
align-self, justify:self: start, end, center... To modify just individual items
grid-auto-flow: row dense . For missing gaps. Grid tries to fit items in empty gaps. FOr example if 2 consecutive divs have 2 columns span (in a total of 3 columns grid. It messes with the order so it should not matter
place-item: start end; (ponemos la posicion horizontal y vertical

Lorem ipsum dolor sit, amet consectetur adipisicing elit.