Two steps are required when it comes to building grid designs:
Imagine we work with following code:
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
The corresponding CodePen is of course available.
First, we need our container to display its content as a grid : #container { display: grid; }. After that we need to slice down the container. There's two ways to do that:
#container {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Here we'll have a grid of 2 columns and 2 rows.
#container {
display: grid;
grid-gap: 1em;
grid-template-areas:
"div1 div2"
"div3 div4"
}
Same here but we use names. In both cases we set up a gap, which is the space between the child element of the container.
#div1 {
grid-column: 1;
grid-row: 1;
}
div1 will go in first column and first row.
#div1 {
grid-area: div1;
}
Here we declare the element's name. As div1 was the first name on the first line, #div1 element will go on first column and first row.
For the slicing part, we can use different units, exclusively or in a combination, such as:
We can also use functions, exclusively or in combination, such as:
For the filling part, we can set up precise coordinates which will be a line or a column line number with the syntax from / to
For instance, if our first div was supposed to fill the entire first line, we could write:
#div1 {
grid-column: 1 / 3;
grid-row: 1;
}
Where we are telling the brower to extend #div1 on column 1 and 2 (column 1 is between number 1 and 2 and column 2 between number 2 and 3).
Target the right element is a must-know. Here's a recap of the available options. Examples are for the following structure:
<h2>Some title</h2>
<p>A paragraph</p>
<div>
<p>I am child of div</p>
<p>The guy up there is my bro.</p>
<section>
<p>Lonely paragraph</p>
</section>
<p>Third brother.</p>
</div>
<p>Out of div</p>
<p>Same</p>
As always, a demo is available on CodePen.
Separate the elements with a ,.
h2, section {
font-weight: bolder;
color: navy;
}
Separate the parent element from the descendant element with a space.
div p {
text-decoration: underline;
}
Separate the parent element from the child element with a >.
body > p {
font-family: monospace;
}
Separate the first bro element from the second with a +.
div + p {
text-align: center;
}
Separate the first bro element from the other ones ~.
div ~ p {
width: 20%;
padding: 0.5em;
border: 0.25em solid indianred;
}
A full list can be found on MDN Web Docs.
Use a pseudo class after the element's name you want to target:
p:first-child {
letter-spacing: 0.25em;
}
p:nth-of-type(3n) {
color: blue;
}
Locate a starting point then create inline elements or specific decoration. For instance:
h2::before {
content: "♥ ";
}
h2::selection {
background-color: gold;
}
There's no attribute in the demo page. See attribute selectors
A free CSS framework to work with when time supply is running low.
Version 3 is the most stable version, supported by all modern browsers.
Bootstrap is a combination of pre-written CSS and JavaScript (jQuery) files, both available from a CDN. To access it, add reference to head element:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Some code snippets are available on my dedicated CodePen
Encapsulate your section into a container class which can be either:
Group elements in a row with row class then distribute included elements into columns per screen size with col-screenSize-numberOfColumns class. An additionnal well class would add grey background color and rounded border to the zone.
size would be:
numberOfColumns is a number between 1 and 12. A row should have a total of 12 colums for each screenSize.
For instance, if we want to align 3 buttons in a row, it means 1 button should be 4 colums wide (3 * 4 = 12).
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4 well">
<button>1</button>
</div>
<div class="col-xs-4 col-md-4 col-lg-4 well">
<button>2</button>
</div>
<div class="col-xs-4 col-md-4 col-lg-4 well">
<button>3</button>
</div>
</div>
Add a static navbar to the top of the page with your website's name, dropdowns, collapsable for small screens, align sign in button to the right and so on. Have a look on CodePen.
Classes for colors are:
element could be text, bg, alert, btn
Some useful class for img element:
To create a gallery, combine thumbnail class with Bootstrap grid system:
figure that will contain a link to the image source full size that will itself containelementShow the user some confirmation or alert message within an element, such as a div. Apply alert class to an element in addition with a alert-contextualColor class (see above) and alert-dismissible class to allow user to remove the element. Removal can be smoothened with fade and in classes. For instance:
<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
button, a, inputBasic classes to apply on a button, a or input elements are:
Then add if needed:
a & button groupsA collection of share links can typically be grouped on a single line with btn-group or btn-group-vertical (+ -size if needed) applied on wrapper element.
Again, this article has to do with understanding default display value before attempting changes. An HTML element could be either inline or block.
Most used inline elements: a, img, br, span, input, label
Often used inline elements: button, code, em, strong, textarea, select
Most used block elements:
Change default display
Diplay can be decomposed in two directions: outer (element's participation in flow layout) and inner (sets layout of children).
Use display property and set it to block or inline - this defines outer direction
Depending on your intent, you may also want to consider using flex value to manage the inner direction
Note that you can use precomposed values containing both outer and then inner instructions such as inline-flex or inline-block.
Zoom on inline-block
Using inline-block you can transform a block element into an inline element, with a width set. Just remember that your two elements must be on the same line to fit into a 100% width. Use a wrapper to set space between elements. Full demo can be found on CodePen. In the following example, p elements will be displayed side by side.
CSS
p {
display: inline-block;
width: 50%;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec neque ut dolor vehicula malesuada.</p><p>Aliquam ornare, orci elementum gravida congue, augue eros congue diam, nec vehicula velit velit non
orci. In eget sem nunc. Nulla facilisi.</p>
Here could be a CSS boilerplate for any project:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid orange;
font-family: sans-serif;
}
Using * we are targeting all elements.
margin and padding properties set to 0 are for cancelling default browser margin and padding (see this previous article). Remember:
margin: 0 auto;
box-sizing property is new to me. It sets how the total width and height of an element is calculated (this explanation and others as well are from MDN Web docs, completed by W3Schools): it can be either unrestricted or restricted to the parent's container.
.box {
width: 350px;
border: 10px solid black;
}
renders a box that is 350 (box width) + 10 (right border ) +10 (left border) = 370px wide.
This means that you may have elements sharing a same width and height but if they have different paddings and/or borders, their total size will be different.
.box {
width: 350px;
border: 10px solid black;
}
renders a box that is 350px wide. This makes the world a little easier to live in, dosen't it?border property to debug positioning drama - you should of course delete or comment (just in case haha) this line for going-live and chose a good contrasting color . I confess, when it comes to add some CSS I often feel not knowing why it's not behaving as expected. So just like many fellows, I'm adding borders to elements and yes, it helps a lot. To avoid repeating it, I put it inside the all selector (*).
font-family property to sans-serif just to make a first step out of raw HTML, it's totally subjective.
I still can't remember wich property apply to which axis so let's build a cheat-set! Again, many thanks to FreeCodeCamp courses for the detailed explanations.
For starters, in our HTML document we'll need a container as well as children boxes. For instance:
<body>
<main>
<section>
<h2>section 1</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
Here the container is main and it's children boxes are section. Let's tell the browser how to position elements on the page:
main {
display: flex;
justify-content: space-evenly;
}
Explanations & other possibilites
First thing first, we have to declare we're using the flex model. Use display property value flex for that.
Main axis
The main axis is declared with flex-direction property:
The justify-content property determines how the items inside a flex container are positioned along the main axis. It can take this values (find all on mdn web docs):
The flex-wrap property determines how the flex items behave when the flex container is too small. Otherwise, items will shrink if needed. It can take this values:
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. It can take one or two lenght value(s) (such as 1em for instance) or percentage value(s).
Cross axis
The align-items property controls alignment of all items on the cross axis. It can take this values: