Loading lesson path
Formula
CSS 12 - Column Grid LayoutA 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout.
Formula
Benefits of a 12 - Column GridThe number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3).
A 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with mediaqueries. This provides a consistent user experience across all platforms.
Formula
Having a pre - defined structure speeds up the design process.
Here is how to create a basic 12 - column CSS Grid layout:Apply display: grid; to the grid container.
Formula
Use the grid - template - columns property to define the 12 columns.The code repeat(12, [col-start] 1fr);Formula
creates a 12 - column grid with equal - width, and names the start line of each column track col - start.repeat(12,..) : Tells the grid to repeat the following track definition 12 times, resulting in 12 columns.
Formula
[col - start]: This creates a named grid line. Because it is repeated 12 times, you will have 12 lines named col-start. This is useful for placing grid items at specific start points within the grid. 1fr : A fractional unit that represents one fraction of the total available space in the grid container. By using 1fr, each of the 12 columns will be an equal, fluid width.
Formula
Grid items can then be placed and sized across these 12 columns using grid - column.
To make a grid item span a certain number of columns, use grid - column: span < number >;
or grid - column:<start-line> / span <number>;.Formula
You can also define the start and end grid lines for an item using grid - column: < start - line >/ <end-line>;.Here we display the sections in the source order (from top to bottom) for screens less than 576 pixels wide.
Formula
Then, we go to a two - column layout for screens between576 and 767 pixels wide.
Formula
Then, we go to a three - column layout for screens over 767 pixels wide.Formula
Complete example of a 12 - column grid layout:* {
box-sizing: border-box;
}.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}/*
Mobile first */.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;Formula
grid - column: col - start / span12;
}
@media (min-width: 576px) {.sidebar {Formula
grid - column:col-start / span 3;
grid-row: 3;
}.ads {Formula
grid - column: col - start /span 3;
}.content, .footer {Formula
grid - column: col - start4 / span 9;
}
nav ul {
display: flex;Formula
justify - content:space-between;
}
}
@media (min-width: 768px) {.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}.sidebar {
grid-column: col-start 11 / span 2;
}.ads {
grid-column: col-start 11 / span 2;
}.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}