我在代码中添加了一些媒体查询，以便当我将屏幕缩小到 iPad 尺寸时，我的三卡行会下降到两张卡，而当我将屏幕缩小到移动设备尺寸时，我的三卡行会下降到一张卡。然而，当卡片尺寸减小时，它们会变得非常薄（似乎周围填充了太多），因此内容每行只有几个单词。我需要卡片真正占据页面的 50% 或 100%，但不明白为什么这么多的填充会阻止这种情况。请帮忙！
我尝试添加媒体查询并在 ChatGPT 上进行故障排除，但没有成功。
<!-- Blog -->
<main class="content">
<div class="wrapper-files-blog">
<div class="header">
<h1 class="header__title">Newsfeed</h1>
<h2 class="header__subtitle">Horizon scanning - Rheumatology</h2>
<div class="container-blog">
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">The Culprit in axSpA: Structural Damage or Disease Activity?</div>
<p>- Global functioning of patients with axial spondyloarthritis (axSpA) is more strongly linked with measures of disease activity and function than with mobility and radiographic damage
<br>- Results also suggest that global functioning is, in this cohort, not much dependent on the degree of structural damage in the axial skeleton
<br>- The study shows that axSpA disease specific PRO's have impact on global functioning whereas spinal mobility scores, even if objectively assessed by the Epionics SPINE (an electronic device for assessment of axial mobility that provides an objective measure of spinal mobility by assessing range [RoM] and range of kinematic [RoK]), have limited impact on patient reported global functioning
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/culprit-axspa-structural-damage-or-disease-activity" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Real-World Evidence Continues to Build Hope for People with Psoriatic Arthritis</div>
<p>- RWE studies provide valuable insights that clinical trials cannot, and support existing conclusions drawn from clinical trials
<br>- Empower HCPs and patients to make informed decisions about treatment
<br>- Nearly 80% of patients had persistent guselkumab use at six months, supporting robust retention data of guselkumab-treated patients (≥90%) from clinical trials
<br>- Patients with 6 months of persistent guselkumab use experienced statistically significant improvements in peripheral joint disease, skin disease, and patient-reported pain
</p>
<div><a href="https://www.hcplive.com/view/real-world-evidence-continues-to-build-hope-for-people-with-psoriatic-arthritis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Guselkumab Improves Skin Disease Activity, Baseline Arthritis in TNF-IR PsA</div>
<p>- Competitor represents an efficacious alternative to TNF inhibitors in patients with intolerance/inadequate response (Phase 3b COSMOS trial)
<br>- Among participants in the biomarker cohort, 44% in the guselkumab group versus 20% in the placebo group achieved an ACR20 response at Week 24
</p>
<div><a href="https://www.hcplive.com/view/guselkumab-improves-skin-disease-activity-baseline-arthritis-in-tnf-ir-psa" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 9, 2023</div>
<div class="blog">PRESTO Successfully Predicts Future PsA in Patients With Psoriasis</div>
<p>- A study in Arthritis & Rheumatology detailed the creation of the Psoriatic Arthritis Risk Estimation Tool (PRESTO), a tool designed to predict psoriatic arthritis (PsA) development in psoriasis patients using available clinical data.
<br>- This prediction model, developed using the University of Toronto Psoriasis Cohort, identified various risk factors for PsA development within 1 and 5 years, including family history, pain severity, and nail lesions.
<br>- Despite the study's limitations, such as a small sample size, researchers believe the PRESTO tool can aid in early diagnosis, inform treatment decisions, and enhance patient education regarding PsA risk.
</p>
<div><a href="https://www.hcplive.com/view/tool-successfully-predicts-future-psa-in-patients-with-psoriasis" target="_" class="button">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</main>
/* Blog */
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.container-blog {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 40px 10px;
}
.square {
flex: 0 0 calc(33.33% - 30px);
margin: 15px;
box-sizing: border-box;
min-height: 215px;
background: white;
padding: 35px;
border-radius: 4px;
box-shadow: 0px 3px 4px rgba(217, 219, 223, 0.6);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
.blog {
margin: auto;
text-align: left;
margin-top: 5px;
padding-left: 5px;
font-family: 'Merriweather', serif;
font-size: 18px;
}
.blog-date, .square p {
text-align: justify;
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 14px;
}
.button {
background-color: #00b0b9;
color: white;
width: 75px;
padding: 10px 10px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
margin-top: 5px;
font-size: 12px;
cursor: pointer;
font-family: 'Merriweather';
position: absolute;
bottom: 10px;
right: 10px;
}
/* iPad */
@media only screen and (max-width: 768px) {
.square {
flex: 0 0 calc(50% - 30px); /* Change to 50% width for 2 squares per row */
}
}
/* Mobile */
@media only screen and (max-width: 480px) {
.square {
flex: 0 0 100%; /* One square per row on mobile */
margin: 10px 0;
}
}
给您四点建议：
gapvwmax()max(2.5vw, 30px)clamp()clamp(5px, 2.5vw, 30px)运行此代码片段后，请确保使用完整页面链接来测试响应能力。
/* Blog */
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
body {
padding: 2.5vw;
background: #f6f6f6;
}
.container-blog {
display: grid;
gap: 3vw;
}
.square {
box-sizing: border-box;
background: white;
padding: 2.5vw;
border-radius: 6px;
box-shadow: 0px 3px 4px rgba(217, 219, 223, 0.6);
transition: all 0.3s ease;
position: relative;
}
.blog {
text-align: left;
font-family: 'Merriweather', serif;
font-size: 18px;
}
.blog-date, .square p {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 14px;
}
.button {
background-color: #00b0b9;
color: white;
width: 75px;
padding: 10px;
border-radius: 13px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
cursor: pointer;
font-family: 'Merriweather';
position: absolute;
bottom: 0;
right: 0;
border: 10px solid white;
}
/* iPad */
@media (min-width: 750px) {
.container-blog {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Desktop */
@media (min-width: 1000px) {
.container-blog {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}<div class="container-blog">
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">The Culprit in axSpA: Structural Damage or Disease Activity?</div>
<p>- Global functioning of patients with axial spondyloarthritis (axSpA) is more strongly linked with measures of disease activity and function than with mobility and radiographic damage
<br>- Results also suggest that global functioning is, in this cohort, not much dependent on the degree of structural damage in the axial skeleton
<br>- The study shows that axSpA disease specific PRO's have impact on global functioning whereas spinal mobility scores, even if objectively assessed by the Epionics SPINE (an electronic device for assessment of axial mobility that provides an objective measure of spinal mobility by assessing range [RoM] and range of kinematic [RoK]), have limited impact on patient reported global functioning
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/culprit-axspa-structural-damage-or-disease-activity" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Real-World Evidence Continues to Build Hope for People with Psoriatic Arthritis</div>
<p>- RWE studies provide valuable insights that clinical trials cannot, and support existing conclusions drawn from clinical trials
<br>- Empower HCPs and patients to make informed decisions about treatment
<br>- Nearly 80% of patients had persistent guselkumab use at six months, supporting robust retention data of guselkumab-treated patients (≥90%) from clinical trials
<br>- Patients with 6 months of persistent guselkumab use experienced statistically significant improvements in peripheral joint disease, skin disease, and patient-reported pain
</p>
<div>
<a href="https://www.hcplive.com/view/real-world-evidence-continues-to-build-hope-for-people-with-psoriatic-arthritis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Guselkumab Improves Skin Disease Activity, Baseline Arthritis in TNF-IR PsA</div>
<p>- Competitor represents an efficacious alternative to TNF inhibitors in patients with intolerance/inadequate response (Phase 3b COSMOS trial)
<br>- Among participants in the biomarker cohort, 44% in the guselkumab group versus 20% in the placebo group achieved an ACR20 response at Week 24
</p>
<div>
<a href="https://www.hcplive.com/view/guselkumab-improves-skin-disease-activity-baseline-arthritis-in-tnf-ir-psa" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 9, 2023</div>
<div class="blog">PRESTO Successfully Predicts Future PsA in Patients With Psoriasis</div>
<p>- A study in Arthritis & Rheumatology detailed the creation of the Psoriatic Arthritis Risk Estimation Tool (PRESTO), a tool designed to predict psoriatic arthritis (PsA) development in psoriasis patients using available clinical data.
<br>- This prediction model, developed using the University of Toronto Psoriasis Cohort, identified various risk factors for PsA development within 1 and 5 years, including family history, pain severity, and nail lesions.
<br>- Despite the study's limitations, such as a small sample size, researchers believe the PRESTO tool can aid in early diagnosis, inform treatment decisions, and enhance patient education regarding PsA risk.
</p>
<div>
<a href="https://www.hcplive.com/view/tool-successfully-predicts-future-psa-in-patients-with-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
</div>运行此代码片段后，请确保使用完整页面链接来测试响应能力。