, ,
,
To put it directly, the key is to create a card layout with CSS. The key is to have clear structure and reasonable style. A common practice is to combine HTML semantic tags and CSS's Flexbox or Grid layout.
1. Infrastructure: HTML builds a card content framework
The first step in card layout is to write the HTML structure well. Usually a card contains elements such as pictures, titles, descriptions, and buttons. It is recommended to use semantic tags, such as <article></article> to wrap the entire card, and use <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175312118475415.jpeg" class="lazy" alt="How to create a card layout with CSS" > , <h3></h3> , <p></p> and <button></button> tags to organize content.
The example structure is as follows:
<article class="card"> <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="card picture"> <h3>Card Title</h3> <p>Here is a brief description of the card. </p> <button>View details</button> </article>
This way, the writing structure is clear and it is also convenient for subsequent use of CSS to control styles.
2. Style design: Use CSS to control the appearance and spacing of the card
The style design of the card mainly revolves around the following aspects:
- Container style : Set the width, margin, border, background color and shadow of the card, etc.
- Element typesetting : Controls the spacing and alignment between pictures, titles, descriptions, and buttons.
- Responsive adaptation : Make the card display well on different devices.
A common practice is to add the following style to .card :
.card {
width: 300px;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 12px;
} The gap attribute can easily control the spacing between child elements without additional margin writing.
3. Multi-card arrangement: Layout with Flexbox or Grid
If you have multiple cards, you usually want them to be arranged in a grid on the page. You can use Flexbox or CSS Grid at this time.
- Flexbox is suitable for single or multi-line arrangements , such as wrapping lines in responsive layouts:
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}- Grid is more suitable for layouts with fixed column counts , such as displaying three cards per row:
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}This way of writing can automatically adapt to different screen widths, and the cards will not be squeezed together and will not leave too much space.
4. Some small details that are easy to ignore
- The picture may be full of the card width by default. It is recommended to set
max-width: 100%andheight: autoto maintain the proportion. - The card hover effect can be achieved with
:hover, such as enlarging or deepening shadows to enhance interaction. - If the content of the text part is too long, it is best to limit the number of lines or use ellipsis to avoid layout confusion.
Basically that's it. Although the card layout is not complicated, the details will be handled well and the experience will be greatly improved.
