What is CSS Grid
-It is used in a CSS file rather than the html file.
-It allows for developers to have grid structures and layouts
-CSS Grid allows for clean spacing
-CSS Grid has many properties that allow for alignment
Important Terms
Grid Elements- A grid layout consists of a parent element, with one or more child elements.
Display- An HTML element becomes a grid container when its display property is set to grid or inline-grid.
Grid Columns- The vertical lines of grid items are called columns.
Grid Rows- The horizontal lines of grid items are called rows.
Grid Lines- The lines between columns are called column lines. The lines between rows are called row lines.
Grid Gaps- The spaces between each column/row are called gaps.
The white line seen between the section of Key Players and description is the Grid Gap
Grid Container- To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.
grid-template-columns- Defines the height of each row. The grid-template-columns defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
Throughout the development of our website we used the grid-template-columns property in order to correctly organize the features of our site.
SIMILAR TO FLEXBOX
justify-content- The justify-content property is used to align the whole grid inside the container.
align-content- The align-content property is used to vertically align the whole grid inside the container.
Figma Example
When designing our website we decided we would layer the website in categories beginning with the NFL transitioning into high school football and finishing off with local turkey bowls. We used CSS Grid to space out our writing to match evenly with the images. My partner and I designed the figma model and made changes to our website as needed. Throughout the design process we came upon issues of alignment and spacing, which were solved using the grid-template-columns property.
Our Website
When creating our website we used CSS Grid in order to align our text with our images.
To begin under our Navbar we used CSS Grid to give our websites heading a box look as seen below.
We styled this in our CSS file.
We used Grid-Template-Columns to structure the website this way.
.title{
display: grid;
grid-gap: 10px;
background-color: white;
padding: 10px;
}
.title > div{
background-color: orange;
text-align: center;
padding: 20px 0;
grid-template-columns: (auto,1, 2fr);
}
As we continued to work on the website we used CSS Grid to space out our opinions on each section. As seen below.
We used CSS Grid in our CSS file. As seen below.
.grid{
display: grid;
grid-gap: 10px;
background-color: white;
padding: 10px;
}
.grid > div{
background-color: orange;
text-align: center;
padding: 20px 0;
font-size: 20px;
grid-template-columns: repeat(3, 1fr);
Top comments (0)